[Resolved] Individual nav item color not stretching to 100% width on Mobile

Home Forums Support Individual nav item color not stretching to 100% width on Mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1365593
    Lakin

    Hello! I have a small issue I’m hoping you can help me with. I have a menu item with the class “menu-item-float-right” as well as another custom class to change the background color, “menu-facebook”

    It looks fine on desktop, but on mobile, the background color does not stretch to fill the entire width of the nav menu. If I remove the “menu-item-float-right” class, it works fine on mobile, but of course no longer floats the item right.

    Here is the relevant CSS:

    .main-navigation .main-nav ul li.menu-facebook a {
        background-color: #4169E1;
        font-size: 2em;
        }
    @media (max-width: 768px) {
        .main-navigation .main-nav ul li a {
            text-align: center;
        }
        
        .inside-navigation {
            text-align: center;
        }
    }

    Is there something simple I am missing? Thanks in advance!

    #1365762
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS:

    .main-navigation.toggled .sf-menu>li.menu-item-float-right.menu-facebook  {
        display: block !important;
    }
    #1365823
    Lakin

    That worked perfectly! Thanks so much. Love GeneratePress, keep up the awesome work.

    #1365865
    David
    Staff
    Customer Support

    Glad to be of help 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.