Archived topic
How can i create header with logo left, menu center and cart right?
16 replies · Started by Uroš on October 13, 2019
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
Hi there,
can you remove the coming soon on your site so i can see your current setup ?
Okay i did it :)
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;
}
}
I did what you said but i got cart text instead of icon. And the css is not changing anything :/
You can enable the Cart Icon in Customizer > Layout > Woocommerce.
I do have enabled cart.. but it's not showing up in menu it's probbably bugged out or something
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.
Wow it really does not even show shop.. hmm probably there is a problem with my woocommerce installation
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
Can you go to customizer > layout > header and enable Navigation as Header and remove the CSS i provided above. May be an easier solution.
That does not center primary navigation haha
No - but if you can enable it then i can look at what CSS is required.
Oh okay. I enabled it so you could try it now :P
Btw can i ask you where i could learn something about css so i could update my website by my self in future..?
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.