[Resolved] Website Menü

[_blank]

Hello,
I am rebuildung my website and I am trying to build a menü that is like this page’s menü:
https://www.dropbottle.com
I created a staging site that i apllied this advice to:
https://docs.generatepress.com/article/centering-logo-navigation/

My questions are:
1. How can I center the menü items to the right and left of the logo instead of having them to the right and left? And how can I add space to the right and the left of the menü items?
2. How can I add a shaddow to the scrolldown menü like https://www.sweat.com
thank you very much
Best
Hannah

[David]

Hi there,

1. this article explains:

https://docs.generatepress.com/article/centering-logo-navigation/

2. Adding a greater drop shadow to the sticky nav – you can use this CSS:

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

[_blank]

2. Thank you so much. The shadow looks great.
1. With this point I am still struggeling.
I have applied this and the primary navigation menü as the header.
Then the logo is visible in the middle (awesome) but the menü items are to the right and to the left and I dont manage to move them: https://snipboard.io/cqtnul.jpg
Or I uncheck the box to set the primary menü as navigation, but then I dont have a logo visible.
https://snipboard.io/cqtnul.jpg
Can you help me to set the settings correctly so the logo is visible + the menü items are centered. Thank you 🙂

3. Is it possible with GP Press do have the menü over the hero image and change the color when scrolling like with this page: https://klaeny.de

[David]

Its very tricky to do that when using a single navigation ( the example site actually uses two navs ) – what makes it trickier is that the left / right distribution and width of the menu items are different.

Might be able to get closer if the GESCHENK item was moved to the left.
You can do that by changing this line in the CSS:

.main-navigation ul li:nth-child(3)

to:

.main-navigation ul li:nth-child(4)

Then i can take another look.

3. You can use a Header Element to simply set the Site Header Merge with Content:

https://docs.generatepress.com/article/header-element-overview/

[_blank]

Hello,
thank you so much.
I added 5 instead of 4 since I also wanted to added another page in the menü and now we are a big step closer. 🙂
I set Site Header Merge with Content, but the only thing I could not figure out is how to still get it closer to the logo.
Thank you so much for all your patience and help 🙂
Best
Hannah

[David]

Getting closer 🙂
Lets try this.

Replace this line:

.main-navigation ul li:nth-child(5) {
  margin-left: auto;
}

with:

.main-navigation .main-nav > ul {
  justify-content: center;
}

.main-navigation ul li:nth-child(5) {
  margin-left: 25%;
}

The 25% may need adjusting to bring the menu items closer / further away.

Couple of things after this:

1. Is the shopping cart which sits outside the main menu – if you want it beside the last menu item you need to add this PHP Snippet to the your site:

add_action( 'wp', function() {
    remove_action( 'generate_menu_bar_items', 'generate_wc_do_cart_menu_item', 5 );
} );

add_filter( 'wp_nav_menu_items', function( $items, $args ) {
    if ( 'primary' === $args->theme_location ) {
        $has_items = false;

        if ( ! WC()->cart->is_empty() ) {
            $has_items = 'has-items';
        }

        return sprintf(
            '%1$s
            <li class="wc-menu-item menu-item-align-right %3$s %4$s">
                %2$s
            </li>',
            $items,
            generatepress_wc_cart_link(),
            is_cart() ? 'current-menu-item' : '',
            $has_items
        );
    }

    return $items;
}, 10, 2 );

2. Responsive behaviour – on smaller screens the menu items will clash with the logo – wrap to new lines…. simple option would be to increase the Customizer > Layout > Primary Navigation –> Mobile Menu Breakpoint so it switchs to mobile on larger screens… or we can mess with some CSS to reduce sizes of menu items etc.

Let me know 🙂

[_blank]

We are almost there – yaaay! 🙂
Thank you so much for your patience.

What I still would like to manage is to have equal space between the logo and the first menü item to the right and the left.
And instead of having the shoppingcart closer to the menü, i would love to have the socials by the shopping cart.
Here is a screenshot: http://prnt.sc/10kgoi9
Is this possible?

Dont worry about mobile – i have a different Mobile Menü. Thanks though 🙂
Have a wonderful day.
Best
Hannah

[Leo]

What I still would like to manage is to have equal space between the logo and the first menü item to the right and the left.

Looks like it’s already this way?
https://www.screencast.com/t/f9AkR2vL

As to move the icons left with the shopping bag, try adding them using this method:
https://docs.generatepress.com/article/generate_menu_bar_items/

[_blank]

wonderful thank you so much 🙂

[Leo]

No problem 🙂

[Author]

Posts