[Resolved] How can i create header with logo left, menu center and cart right?

[Uroš]

Hello, i just cant seem to find any solution for my header to position my menu in center. Im looking for something similar like Casper did with their header: https://casper.com/home/

I would also like to recreate their mobile menu but it seems like it’s impossible with generate press. I hope i’m mistaken and someone will help me out. 🙂

I also use elementor pro

[David]

Hi there,

can you remove the coming soon on your site so i can see your current setup ?

[Uroš]

Okay i did it 🙂

[David]

With your current set-up – first you will need to setup woocommerce so as the cart icon displays. Then add this CSS:

@media (min-width: 769px) {
    .inside-header, .main-navigation ul {
        display: flex;
    }
    .main-navigation  {
        flex: 1;
    }
    .main-navigation ul li:first-child, .main-navigation ul li.wc-menu-item {
        margin-left: auto;
    }
}

[Uroš]

I did what you said but i got cart text instead of icon. And the css is not changing anything :/

[David]

You can enable the Cart Icon in Customizer > Layout > Woocommerce.

[Uroš]

I do have enabled cart.. but it’s not showing up in menu it’s probbably bugged out or something

[David]

Do you have the Woocommerce shop and products set up? Currently i cannot access the shop to add any products to see what the issue may be.

[Uroš]

Wow it really does not even show shop.. hmm probably there is a problem with my woocommerce installation

[Uroš]

Okay i fixed everything but it still does not center it on header width because it center it between logo and cart.. I want that menu is perefectly centered inside header

[David]

Can you go to customizer > layout > header and enable Navigation as Header and remove the CSS i provided above. May be an easier solution.

[Uroš]

That does not center primary navigation haha

[David]

No – but if you can enable it then i can look at what CSS is required.

[Uroš]

Oh okay. I enabled it so you could try it now 😛

Btw can i ask you where i could learn something about css so i could update my website by my self in future..?

[David]

Try this CSS:

@media (min-width: 769px) {
    .navigation-branding,
    .main-navigation ul li.wc-menu-item,
    .main-navigation ul li.search-item {
        position: absolute;
    }
    .navigation-branding {
        left: 0;
    }
    .main-navigation ul li.wc-menu-item {
        right: 60px;
    }
    .main-navigation ul li.search-item {
        right: 0;
    }
    .main-navigation .inside-navigation {
        justify-content: center;
    }
}

Learning CSS is as much about learning browser dev tools and HTML.
Good place to start with Dev tools for CSS:

https://developers.google.com/web/tools/chrome-devtools/css

Then checkout W3 Schools they cover and provide examples of all CSS properties.

[Author]

Posts