Changing the size of a menu bar on a mobile app

David Schure
David Schure used Ask the Experts™
on
Having a problem with the menu bar at the top of a mobile device.   It's the perfect height on the desktop, however; on the phone it is too thick as are the menus that come up.  How do I shrink the height of the menu bar as well as each line element.

http://mediascrubber.com/index.html

.mobile_menu {
    overflow: hidden;
}
.logo-mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    padding: 18px 0 0 18px;
}
.logo-mobile-menu a img {
    width: 220px;
}
.mean-container a.meanmenu-reveal {
    width: 30px;
    height: 30px;
    padding: 20px
}

.mean-container .mean-bar {
    /*padding: 7px 0;*/
	padding: 5px 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}
.mean-container .mean-nav {
    /*background: #3c3c3c;*/
	background: #8f7a45;
	filter: alpha(opacity=70);
    -webkit-opacity: .7;
    opacity: .7;
}
.mean-container .mean-nav {
    /*margin-top: 60px;*/
	margin-top: 20px;
}
.mean-container a.meanmenu-reveal span {
    margin-top: 6px;
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
David S.Consultant & Challenge Subduer
Top Expert 2009
Commented:
The menu bar has a min-height set in one of the ".mean-container .mean-bar" rules in "css/plugin.css".

The padding set in the ".mean-container .mean-nav ul li a" rule in "css/plugin.css" controls the menu item height.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
In your desktop menu your menu items <a> elements have padding set at
.navigation ul > li > a {
  ...
  padding: 14px 10px; /* <==== SET HERE */
}

Open in new window

In the mobile version
If you change the padding here - that should make the menu the same as desktop
.mean-container a.meanmenu-reveal {
	width: 30px;
	height: 30px;
	padding: 9px; /* <====== CHANGE TO THIS */
}

Open in new window


For the menu items
.mean-container .mean-nav ul li a {
  ...
  padding: .5em 5%; /* <=== CHANGE THIS */
  ...
}

Open in new window

Author

Commented:
Thank you Guys.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial