executive theme responsive-navbar problem

Community Forums Forums Design Tips and Tricks executive theme responsive-navbar problem

This topic is: not resolved

This topic contains 8 replies, has 2 voices, and was last updated by  weslinda 1 year, 6 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #24335

    fotodog13
    Participant
    Post count: 50

    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

    #24344

    weslinda
    Participant
    Post count: 193

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


    Loving the Genesis Life!

    #24346

    fotodog13
    Participant
    Post count: 50

    oops my bad- here is the site url

    http://aielloenergy.com

    thanks

     

    #24375

    weslinda
    Participant
    Post count: 193

    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!

    #24380

    fotodog13
    Participant
    Post count: 50

    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

    #24384

    weslinda
    Participant
    Post count: 193

    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!

    #24385

    fotodog13
    Participant
    Post count: 50

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

    #24517

    fotodog13
    Participant
    Post count: 50

    Thanks again Wes,

    This worked perfectly-

    THis thread can be closed now if need be

    #24539

    weslinda
    Participant
    Post count: 193

    Glad this worked out!


    Loving the Genesis Life!

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.