Mobile Menu Navigation drop down overlaps with website content

  • Resolved jackiesoo213

    (@jackiesoo213)


    6 years, 9 months ago

    Hi! I’m new to CSS so please pardon my terminology if I have some trouble describing things precisely!

    Okay, so I’ve tried to customize the Primary Navigation Menu using the following code:

    /*Main Navigation Menu*/
    .main-navigation {
    background-color: white;
    border: 1px black;
    border-style: solid none;
    height: 40px;
    /*width: 1020px;*/
    }

    /*Main Navigation Menu Text*/
    .main-navigation .main-nav ul li a, .main-navigation .menu-toggle {
    color: black;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size:0.8em;
    line-height: 40px;
    }

    /*Main Navigation Menu Text appearance when you hover on the links*/
    .main-navigation .main-nav ul li:hover > a,
    .main-navigation .main-nav ul li:focus > a,
    .main-navigation .main-nav ul li.sfHover > a {
    color: black;
    background-color: white;
    text-decoration: underline;
    }

    Things look great on the desktop site, but in the mobile version, the Navigation Menu options (in the drop down) overlap with the blog content. Furthermore, when you click on “Menu,” the text disappears – i.e., I think that the color for the visited “Menu” link is set to white. I’m not sure how to push the blog text down so that the drop down menu doesn’t overlap, and also change the visited “Menu” link color to black?

    Also, as long as I’ve got your attention (ha!), I would love to anchor the width of the Primary Navigation Menu to the width of the website content – so, the top and bottom borders of the Navigation Menu should end at the left border of the blog and the right border of the “Search” button. I’ve tried to shoehorn in a clunky fix by setting the width of the Main Navigation Menu to 1020px (it’s in my code, but currently commented out), but this makes things wonky when you shrink the screen, and especially wonky in the mobile version. Is there any way to have the Menu bar be flush with the current left border of the blog container and right border of the right sidebar, but also maintain the mobile-responsive appearance when the screen is shrunk?

    Sorry this has been so rambling. Thank you so much in advance for any help you can provide!!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Tom

    (@edge22)

    Hi there,

    The first issue is being caused by the height: 40px; CSS in your .main-navigation selector. If you remove that height, it should work.

    To fix the hover color, try this CSS:

    button.menu-toggle:hover {
    color: black;
}

    For the alignment issue, try:

    1. Setting your container to “One Container” in Customize > Layout > Container.

    2. Adding this CSS:

    .one-container .site-content {
    padding-left: 0;
    padding-right: 0;
}

    Let me know ??

    Thread Starter jackiesoo213

    (@jackiesoo213)

    Hi Tom,

    Yes, everything worked! Thanks so much for your help!!

    Theme Author Tom

    (@edge22)

    You’re very welcome ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Mobile Menu Navigation drop down overlaps with website content’ is closed to new replies.