[Support request] Delete the line under the menu

Home Forums Support [Support request] Delete the line under the menu

Home Forums Support Delete the line under the menu

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1633419
    Matthieu

    Hello, is it possible to remove the little gray line at the bottom of the menu bar to obtain a completely transparent menu.

    And can we adjust the hamburger menu margin from left to right as well as that of the logo using the navigation as header? (For example if I want my logo to be slightly offset on the right and the hamburger menu on the left)

    Thanks 😁

    #1633424
    Elvin
    Staff
    Customer Support

    Hi,

    Hello, is it possible to remove the little gray line at the bottom of the menu bar to obtain a completely transparent menu.

    can you temporarily disable autoptimize or any caching plugin? So we could check the original source of the styling.

    Your site has this CSS:

    .sticky-enabled .main-navigation.is_stuck {
        box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
    }

    If this is a custom CSS, you can remove it.

    If it isn’t, add this CSS:

    .sticky-enabled .main-navigation.is_stuck {
        box-shadow: none;
    }

    And can we adjust the hamburger menu margin from left to right as well as that of the logo using the navigation as header? (For example if I want my logo to be slightly offset on the right and the hamburger menu on the left)

    I’m not sure I understand what you mean.

    To clarify, do you want it to display this way? https://share.getcloudapp.com/04uJbBdn

    If yes, add this CSS:

    .inside-navigation {
        flex-direction: row-reverse;
    }

    If this is how you want it to display: https://share.getcloudapp.com/L1uNom2o

    Add this css:

    .navigation-branding {
        margin-right: 20px;
        margin-left: 0;
    }
    
    .main-navigation .inside-navigation {
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1633433
    Matthieu

    Hello, thank you for your answer. So for the line under the menu, thanks to your css the line has been deleted, it’s perfect!

    For the other part I explained myself badly sorry …

    Currently the logo is on the left, a little too stuck to the edge of the page for my taste, I wanted to know if it is possible to adjust its offset to the right so that it is less stuck to the edge.

    And the same for the hamburger menu, shift it slightly to the left.

    Thanks

    #1633438
    Elvin
    Staff
    Customer Support

    We can add margins to them to move them around a bit.

    Try these CSS:

    nav#site-navigation.main-navigation .inside-navigation .navigation-branding {
        margin-left: 25px;
    }
    
    nav#site-navigation.main-navigation .inside-navigation .menu-bar-items {
        margin-right: 20px;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1633450
    Matthieu

    It’s a sticky header navigation so with this css when I go down, the hamburger menu logo and icon go back to their original position (glued to the edges).

    (Can we different margins on desktop and mobile ?)

    Thanks

    #1633638
    Elvin
    Staff
    Customer Support

    You can change the selector to this so it works with sticky nav as well.

    nav#site-navigation .inside-navigation .navigation-branding, nav#sticky-navigation .inside-navigation .navigation-branding{
        margin-left: 25px;
    }
    
    nav#site-navigation .inside-navigation .menu-bar-items, nav#sticky-navigation .inside-navigation .menu-bar-items {
        margin-right: 20px;
    }

    and then we can create @media rule for mobile by doing this:

    @media (max-width:768px){
    nav#site-navigation .inside-navigation .navigation-branding, nav#sticky-navigation .inside-navigation .navigation-branding{
        margin-left: 15px;
    }
    nav#site-navigation .inside-navigation .menu-bar-items, nav#sticky-navigation .inside-navigation .menu-bar-items {
        margin-right: 10px;
    }
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1634607
    Matthieu

    Hello, so I made some modifications, I set in the main navigation “Internal width of navigation” in “Content” mode.

    I see on my screen the hamburger menu is slightly on the left, it is not aligned with my content width which is 1100px, is that normal?

    And little question, on my phone I have the woocommerce cart icon, is it possible to remove it?

    Thanks πŸ˜ƒ

    #1634955
    Elvin
    Staff
    Customer Support

    I see on my screen the hamburger menu is slightly on the left, it is not aligned with my content width which is 1100px, is that normal?

    The menu toggle button doesn’t align because of the padding. You can try to remove it so it aligns along with the contained contents.

    .main-navigation .menu-bar-item>a {
        padding-left: 0;
        padding-right: 0;
    }

    And little question, on my phone I have the woocommerce cart icon, is it possible to remove it?

    You can remove the cart through the customizer:
    https://docs.generatepress.com/article/woocommerce-overview/#general

    A wise man once said:
    "Have you cleared your cache?"

    #1635260
    Matthieu

    Perfect, thanks !

    #1635269
    Elvin
    Staff
    Customer Support

    Nice one. No problem. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

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