[Resolved] Secondary Navigation how to float some menu items to the left?

Home Forums Support Secondary Navigation how to float some menu items to the left?

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1046180
    bluebit

    For my site, I’m trying to float all my menu items to the left except the shopping cart icon. I added the below css class to each menu item but it doesn’t work:

    menu-item-float-left

    #1046200
    Leo
    Staff
    Customer Support

    Hi there,

    Try adding the menu items that you want to float left using a menu widget in top bar:
    https://docs.generatepress.com/article/top-bar-widget-area/

    Then activate merge with secondary navigation:
    https://docs.generatepress.com/article/top-bar-widget-area/#secondary-navigation

    Let me know if this helps 🙂

    #1046209
    bluebit

    that works except the shopping cart can’t get added into the menu, there is no option and the cart needs to float to the right.

    #1046210
    bluebit

    i just installed a wordpress woocommerce add shopping cart to menu plugin and trying to get this to work.

    #1046223
    bluebit

    nice I got it to work, now how do I add padding to the left and right sides of the top menu?

    #1046285
    Leo
    Staff
    Customer Support

    What padding are you referring to?

    It looks really good to me right now?
    https://www.screencast.com/t/zCeVBTliMPV

    #1046405
    bluebit

    the padding for the merged topbar/second navigation menu, I’d like to adjust the far left and far right side padding. I’d like to add some extra padding to the left of My Account and to the right of the shopping cart.

    #1046420
    bluebit

    also for some reason on mobile my footer links: Copyright text should be centered in the middle and the Privacy Policy should be aligned to the right, but has moved down 1 row. The footer should look exactly like my other website: mineralstudy.com

    but I can’t figure out why on mobile it messes up on my new site

    #1046603
    David
    Staff
    Customer Support

    Hi there,

    probably easier to reduce the max-width of the secondary navigation like so:

    .secondary-navigation .inside-navigation {
        max-width: 1000px;
    }

    You’re footer is quite complex with Widgets inside a page builder widget and the styles form text alignment are defined using inline CSS…. try this CSS to force it to center on mobile:

    @media(max-width: 768px) {
        .footer-bar .textwidget p {
            text-align: center !important;
        }
    }
    #1046641
    bluebit

    Will this still work if I disabled generatepress mobile with a snippet? I have mobile show the desktop version always.

    #1046647
    David
    Staff
    Customer Support

    It will do but on smaller devices the screen width will be smaller then that max-width. So you won’t notice any difference. If thats an issue then add padding to the container ie.

    .secondary-navigation .inside-navigation {
        padding-left: 10px;
        padding-right: 10px;
    }
    #1048541
    bluebit

    This code isn’t working for mobile:


    @media
    (max-width: 768px) {
    .footer-bar .textwidget p {
    text-align: center !important;
    }
    }

    #1048548
    bluebit

    ok, i see what the problem is, for some reason on mobile it only is creating two footer widgets instead of 3. So the center widget is moved to the left and the 3rd widget is pushed the next row.

    #1048550
    bluebit

    i just fixed it, there was a setting in siteorigin layout builder where i had to uncheck responsive for mobile and tablets

    #1048661
    David
    Staff
    Customer Support

    Glad to hear you got it resolved.

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