[Support request] Delete the line under the menu

[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 😁

[Elvin]

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;
}

[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

[Elvin]

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;
}

[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

[Elvin]

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;
}
}

[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 😃

[Elvin]

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

[Matthieu]

Perfect, thanks !

[Elvin]

Nice one. No problem. 🙂

[Author]

Posts