?
Solved

Jquery Mobile Header Height  Adjustment

Posted on 2013-01-01
2
Medium Priority
?
1,852 Views
Last Modified: 2013-01-02
I'm trying to understand how to adjust the height of the header bar which holds the Menu button on my test site - http://test2.dfigdesign.com.  Do I override the .ui-bar-b element to do so, and what is the CSS needed for this, please?  I would like to reduce the size of the header bar by at least 50%.
0
Comment
Question by:danfiggolf
2 Comments
 
LVL 16

Accepted Solution

by:
HagayMandel earned 2000 total points
ID: 38735702
Your header div already holds some styling:

<div data-role="header" style="bottom: 0px; data-position=;" inline"="" data-theme="b" class="ui-header ui-bar-b" role="banner">

Open in new window


Simply add the required height here:

<div data-role="header" style="bottom: 0px; data-position=; height:50px;" inline"="" data-theme="b" class="ui-header ui-bar-b" role="banner">

Open in new window

0
 
LVL 11

Expert Comment

by:mcnute
ID: 38736123
Even better practice though is to apply your height style in the jquery-mobile css file for the class ui-header. This makes your code more easy to maintain.
0

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

569 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question