Solved

Jquery Mobile Header Height  Adjustment

Posted on 2013-01-01
2
1,532 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 500 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

Migrating Your Company's PCs

To keep pace with competitors, businesses must keep employees productive, and that means providing them with the latest technology. This document provides the tips and tricks you need to help you migrate an outdated PC fleet to new desktops, laptops, and tablets.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Fulfillment API php code sample 1 41
How to position loader with CSS 3 40
Decrypt string by php 7 31
How do I fix this UPDATE error? 7 24
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses four methods for overlaying images in a container on a web page
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…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

809 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