Archived topic
Logo on left side header, menu centered, and icon search and basket on right.
3 replies · Started by Marcin on October 5, 2020
Viewing posts 1–4 of 4
Hello, I would like the logo on the left side, the menu in the middle and the basket and search on the right side. Is there an easy way to do something like this? https://ibb.co/BrSJ5N0
Hi there,
Our site Target uses a similar layout:
https://gpsites.co/target/
And it's using this CSS:
/* Primary navigation styles */
.main-navigation:not(.slideout-navigation) .main-nav {
flex-grow: 1;
}
.main-navigation .main-nav {
text-align: center;
}
@media (min-width: 769px) {
.nav-aligned-right .main-navigation .menu li.search-item,
.nav-aligned-right .main-navigation .menu li.wc-menu-item {
float: right !important;
}
}Thank you for the quick reply. I have one more little question, how to add an additional login icon next to the search and cart icons. Similar to the previous screenshot?
You would add the icon with a custom class like login then edit the CSS to this:
/* Primary navigation styles */
.main-navigation:not(.slideout-navigation) .main-nav {
flex-grow: 1;
}
.main-navigation .main-nav {
text-align: center;
}
@media (min-width: 769px) {
.nav-aligned-right .main-navigation .menu li.search-item,
.nav-aligned-right .main-navigation .menu li.wc-menu-item,
.nav-aligned-right .main-navigation .menu li.login {
float: right !important;
}
}
This archived topic is closed to new replies.
