Search code examples
jqueryhtmlcssjquery-mobilehybrid-mobile-app

jQuery Mobile Button Icon in Header goes underneath

In my header of my page I have to put two button side by side. For ref, see the screen shot below. The actual requirement where the buttons are side by side

But after using following code, the icons are over lapping each other. For Ref. see the screen shot below.

<div data-theme="a" data-role="header" data-position="fixed"> <a data-role="button" data-rel="back" data-theme="a" href="#homepage" data-icon="back" data-iconpos="left" class="ui-btn-left"> Back </a>
<h3> Header </h3>
<a data-role="button" href="#homepage" data-icon="home" data-iconpos="notext" class="ui-btn-right home_icon_top"></a>

One button goes underneath

I am using jQuery Mobile.

Solution 
  • .home_icon_top{
    right:50px !important;
}

    Adjust the value of the right as your wish.

    DEMO