executive theme responsive-navbar problem

[fotodog13Participant Post count: 26]

Hi All,

I am using the executive theme and the latest version of wordpress, genesis, etc.

The site I am working on displays correctly on the desktop but having problems with the mobile(responsive) display.

When I look at the site on a mobile or at http://www.studiopress.com/responsive/ the navbar is not fully displayed.

It is only showing part  of the navigation .

I am  trying to use firebug to figure out the problem but have had no luck.

I thought it might have something to do with the menu css. -bleow is what I am currently using-

.menu-primary, .menu-secondary, #header .menu {

    background: url(“images/top-navbar.png”) repeat-x scroll 0 0 #9ACF5D;
    clear: both;
    color: #666666;
    font-size: 14px;
    height: 50px;
    margin: 0 auto;
    overflow: hidden;
    width: 100%;

}

I tried to set the background- on the css for the responsive  like the following on the style sheet
@media only screen and (max-width: 767px) {

#header .menu {
background:#9acf5d!important;

}
with no luck.

Would really appreciate anyone that has an idea on how to solve this problem.
thanks

Scott V

[weslindaParticipant Post count: 177]

Do you have a link?  Something that we can take a peek at? If no live site, perhaps a screenshot?

---

Loving the Genesis Life!

[fotodog13Participant Post count: 26]

oops my bad- here is the site url

http://aielloenergy.com

thanks

 

[weslindaParticipant Post count: 177]

So in a quick glance, you have a fixed height on the menu.  Getting rid of the height completely, or making it min-height allowing some flexibility should fix it.

---

Loving the Genesis Life!

[fotodog13Participant Post count: 26]

Hey weslinda

so would that be something like this on the

@media only screen and (max-width: 767px)

min-height:50px!important ;

and leave the rest of the css alone ?

Is there a way to check this using firebug on an i=phone” or just the studiopress/responsive ? to test it

[weslindaParticipant Post count: 177]

If you set the min-height for the nav, there would be no need to adjust at the @media sections.  By defining the menu height as a fixed height as you have in the theme, you’d have to adjust as you go if you want to edit for each @media pull.

So defining a new menu height at each level would be needed.  If you switch from height to min-height in the original css, then it’ll resize as needed.

---

Loving the Genesis Life!

[fotodog13Participant Post count: 26]

super will try it  -thanks will post back here -moderator please leave this open

[fotodog13Participant Post count: 26]

Thanks again Wes,

This worked perfectly-

THis thread can be closed now if need be

[weslindaParticipant Post count: 177]

Glad this worked out!

---

Loving the Genesis Life!

[Author]

Posts