Skip to content
Related Articles
Get the best out of our app
Open App

Related Articles

jQuery Mobile Toolbar position Option

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

jQuery Mobile is a web-based technology used to create websites and apps which are responsive and accessible on devices of various screen sizes like mobile, tablets, and desktops.

In this article, we will use the jQuery Mobile Toolbar position option. When the position option is set to “fixed” the toolbar floats above the content using CSS property position: fixed“.


Initialize toolbar with the specified position option:

$( ".selector" ).toolbar({
  position: "fixed"

Get or set the position option, after initialization:

// Getter
var position = $( ".selector" ).toolbar( "option", "position" );
// Setter
$( ".selector" ).toolbar( "option", "position", "fixed" );

CDN Links: First, add jQuery Mobile scripts needed for your project.

<link rel=”stylesheet” href=”” />
<script src=””></script>
<script src=””></script>

Example: In this example, we will set the position option to “fixed” so the toolbar will float over the content.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
    <script src=
        $(document).ready(function () {
                position: "fixed",
    <div data-role="page">
            <h2 style="color:green">
            <h3>jQuery Mobile Toolbar position option</h3>
            <h2>What is GeekforGeeks?</h2>
            <p style="padding:0px 20px;">
                GeeksforGeeks is a computer science portal
                for geeks by geeks. Here you can find
                articles on various computer science topics
                like Data Structures, Algorithms and many
                more.... GeekforGeeks was founded by Sandeep
                Jain in 2009. GeeksforGeeks also provide
                courses, you can find the courses at
                <a href="">
                </a> For cracking interviews of top product
                based companies, you need to have good and
                deep understanding of topics like DSA, System
                design etc. GeeksforGeeks provide you quality
                content so that you can prepare for the
                interviews. GeeksforGeeks also have a practice
                portal where you can practice problems and
                brush on your skills. You can visit the
                practice portal at
                <a href="">
        <div id="divID" data-role="header">


Toolbar floating on top of other content


My Personal Notes arrow_drop_up
Last Updated : 10 Feb, 2022
Like Article
Save Article
Similar Reads
Related Tutorials