Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #16334

    With the number of pages I have a second row in the menu bar. When I select any of the pages in the top row it shifts the pages of the bottom row so that the first item in the bottom row is always to the right of the selected item above. This especially causes issues with top row item that has a drop down menu so that links start overlapping.

    I’ve included all of my Custom CSS just incase there is a conflict somehow.

    .social_bookmarks .rss {

    display: none;

    }

    img.ajax-loader {

    display: none;

    }

    div.bbp-breadcrumb {

    float: none;

    }

    #wpdoor_msg {width: 278px;}

    .wpcf7-form input,

    .wpcf7-form textarea

    {

    color: #444444;

    }

    .gallery .gallery-item {

    margin-top: 41px !important;

    }

    #top .portfolio-title {

    font-family: “Josefin Sans”, Arial;

    }

    .page-id-1376 .main_menu {

    display: none;

    }

    .page-id-1376 #footer {

    display: none;

    }

    #91122

    Hi matthewglover,

    Can you post a link to your site? specifically the one page which has the issue.

    Regards,

    Ismael

    #91123

    http://jockup.com/chat-room/

    As you see it pushes the second row to the right of the page selection of the top row. If you hover over ‘Locker Room’ the drop down menu covers ‘Contact’ yet both are selectable.

    I’m not sure if the floating of the bottom item is an ‘as design’ item or not but I think if the bottom row stayed aligned to the far left that would fix my issue. If you have other ideas I’m open to that as well.

    Thanks!

    #91124

    I did a quick fix of just removing one menu item. Now the menu is all on one line or if if the window is smaller and forces the nav bar to two lines the menu item with the drop down items is on the bottom row and doesn’t interfere with anything.

    I would still be interested in a way to force the bottom row from not floating right of the selected nav page above it.

    Thank you

    #91125

    Ok never mind my fix didn’t work LOL so still need resolution. Thanks!

    #91126

    Hi,

    How about changing the font-size to make room for the contact menu item. Try to add this on your custom.css

    li.menu-item a {
    font-size: 12px;
    }

    Change the size.

    Regards,

    Ismael

    #91127

    That doesn’t work either. With the menu being dynamic if you shrink the size of the window that the site is viewed on it will drop the last couple to the second row no matter what size the menu items are which runs into the same issue as far as I can tell.

    If the second line of the nav menu can’t be forced to align left without it being effected by the page selection on the top row…is there a way to not of the nav bar be dynamic?… So that the entire nave bar stays one one line if it has room until the window is shrunk then it converts to the scroll window selection option as it already does at the minimum window width.

    #91128

    I partially answered my question after finding this past post:

    http://www.kriesi.at/support/topic/navigation-menu#post-73140

    /* All Mobile Sizes (devices and browser) */

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

    I changed the max-width to 989px. This made the theme shift to the mobile mode before any of my nav menu items drop to a second row.

    I couldn’t figure out how to then make the scroll nav menu kick in once the browser dropped before the 989px width. Currently there is a gap that has no navigation what-so-ever between the 989px width and what was designated as the orginal max width of the mobile frame.

    #91129

    LOL ok never mind that only worked with Firefox and didnt seem to do anything with any of the other browsers I tested.

    #91130

    Hi matthewglover,

    I would definitely not recommend doing anything to main media queries. What you could do is switch the width at which the mobile menu appears. Go to your theme files and open up js>avia.js and then search for:

    // improves menu for mobile devices

    Just below that line, you can see the pixel width at which the mobile menu appears. Try changing it there to what you would like.

    Regards,

    Devin

    #91131

    Fantastic! Thanks Devin and Ismael

    #91132

    Hi matthewglover,

    Glad that we could help. :)

    Cheers,

    Ismael

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

The topic ‘Second Menu Row Shifts’ is closed to new replies.