Centered Logo/Hamburger Menu Left/Cart Right

[Zafiris]

Hello Tom,

Thanks for your awesome work and support! Hope I don’t ruin your holidays!

I’m trying to achieve a navigation menu like this site:

https://www.etq-amsterdam.com/

As you can see it’s logo at the center, hamburger menu on desktop/mobile on the left and the bag at the right. Is the way to go the GP Hooks? Although it’s seems to be easy I haven’t managed to replicate it. Also do I need to do something specific to make it responsive as this site?

Thanks in advance!

Zafiris

GP Premium 1.4.3

[Tom]

Hmm, not that easy – but it’s a look I’d like to make easier.

Probably best if we work through it in steps.

1. Set up your navigation as your header: https://docs.generatepress.com/article/navigation-logo/

2. Enable the slide-out navigation: https://docs.generatepress.com/article/activating-slide-out-navigation/

3. Remove everything from your primary menu, so it’s completely empty.

Once you’ve done that, if you could link me to your site, we should be able to get the rest of the way 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zafiris]

Hey Tom!

I followed your instructions, here is the site:

http://www.nataliabasdeki.com/

Thanks for your quick response!

[Tom]

Can you upload a navigation logo, and enable the cart menu item in Customize > Layout > WooCommerce?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zafiris]

Sure, just did it

[Tom]

Give this a shot:

li.slideout-toggle,
li.wc-menu-item,
.menu-toggle {
    position: absolute;
    left: 10px;
    top: 5px;
}

li.wc-menu-item,
.mobile-bar-items.wc-mobile-cart-items {
    left: auto;
    right: 10px;
    top: 5px;
    float: none;
}

.site-logo.navigation-logo {
    display: inline-block;
    float: none;
    width: auto;
}

#site-navigation {
    position: relative;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zafiris]

Awesome! I don’t know what kind of sorcery you did but that did the work!

3 more things, I promise I’ll be quick!

1. The logo doesn’t seem to be exactly centered, it looks a little bit on the left. Is there a way to be always centered?

2. The slideout menu is tranparent. Is it supposed to be like that or I can make it solid?

3. I want to change the layout of the menu items inside the slideout menu, to push them a little bit down. I can do this with CSS?

Thanks a lot!

[Tom]

You could try this:

.site-logo.navigation-logo {
    position: absolute;
    left: calc( 50% – 150px); /* 50% from the left – half your image width */
}

Just be sure to adjust the 150px so it’s half of your image width.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zafiris]

Thx a lot Tom, I really appreciate your support.

For the other 2 questions should I open another topic?

[Tom]

Ah, sorry! Was late last night 🙂

2. You can set your navigation color in Customize > Colors > Primary Navigation – these colors apply to the slide-out menu for now.

3. You can try this:

#generate-slideout-menu {
    padding-top: 50px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zafiris]

That did the job!

[Tom]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts