Archived topic
Login, Search & Cart Icons in the Header for Desktop
66 replies · Started by Georgi on February 13, 2022
Oops there's an error in this CSS:
https://www.screencast.com/t/DYTLDJopu
Remove the extra . should fix the problem.
This moved it next to the cart but on the right side https://prnt.sc/S_vjEoO8E7jD :D
Can it be made to be on the left side of the cart?
I also see that the icons are not aligned with each other.
1. Add this CSS to align the icons:
.inside-header span.account-icon.gp-icon a {
line-height: 20px;
}2. To switch icons, you just need to switch the 40px and 90px in the CSS.
Thanks, Ying, this worked quite well! :)
If I want to change the two icons color to black, how can it be done?
You can control the color at customize > colors > header > link.
Thanks :)
If I want change the two icons size to be a little bigger, how can it be done?
Try this：
.site-header .gp-icon {
font-size: 23px;
}Thank you 😊
But after I changed the size, the icons misaligned by a little: https://prnt.sc/8-Y7y9AGDBTF
I tried to realign them with the CSS you gave me:
.inside-header span.account-icon.gp-icon a {
line-height: 20px;
}But the maximum line height that makes a change for the account icon is somewhere at 30 px and is not enough to be on the same level with the cart.
You can remove the line-height CSS, add some margin to adjust the position:
span.account-icon.gp-icon {
margin-bottom: 5px;
}Awesome, this did it!! 🤗
Something else I noticed that after some recent change in the CSS perhaps, a lot of white space appeared in the mobile header https://prnt.sc/4sUVFw4azraW
The misalignment of the basket and the search also occured.
This is all the additional CSS I have in the Customizer:
@media (max-width: 768px) {
.main-navigation.has-branding .inside-navigation.grid-container {
flex-wrap: nowrap; background-color: white;
}
@media (max-width:768px){
nav#mobile-header .menu-bar-items span.gp-icon svg {
fill:black;
}
}
#mobile-header.has-branding button.menu-toggle {
order: 0;
flex: 1 0 15%;
padding: 0 10px !important;
}
.site-logo.mobile-header-logo {
order: 1;
margin: 0 auto;
flex: 1 0 70%;
position: relative;
}
.menu-bar-items {
order: 2;
flex: 1 0 15%;
padding: 0 10px !important;
}
button.menu-toggle,
.menu-bar-items,
.site-logo.mobile-header-logo {
text-align: center;
display: flex;
justify-content: center;
}
nav#mobile-header .inside-navigation.grid-container.grid-parent {
position: relative;
}
button.menu-toggle span.gp-icon.icon-menu-bars {
margin: auto;
display: flex;
height: 100%;
}
}
.main-navigation .menu-bar-item > a.cart-contents {
font-size: 19px;
}
span.gp-icon.icon-menu-bars img {
width: 39px;
}
.archive.woocommerce mark.count {
display:none;
}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
color: #fff;
background-color: #83B735;
padding: 5px 10px;
border-radius: 5px;
}
.woocommerce .products .star-rating[title~="Not"] {
display: none;
}
/* hide woocommerce zoom icon by wooexplorer*/
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
display: none;
}
.rank-math-breadcrumb {
font-size: 15px!important;
}
/* Change price font size for archive only */
.product .woocommerce-Price-amount {
font-size: 17px;
}
span.account-icon svg {
width: 25px;
}
@media (min-width: 769px) {
.wc-menu-cart-activated.main-navigation span.menu-bar-item.wc-menu-item {
display: none;
}
}
.inside-header span.account-icon {
position: absolute;
right: 90px;
margin-bottom: 3px;
}
.inside-header .custom-cart {
position: absolute;
right: 35px;
}
.site-header .gp-icon {
font-size: 21px;
}There are two media queries - one nested inside of each other which is gonna break stuff.
See this:
@media (max-width: 768px) {
.main-navigation.has-branding .inside-navigation.grid-container {
flex-wrap: nowrap; background-color: white;
}
@media (max-width:768px){
nav#mobile-header .menu-bar-items span.gp-icon svg {
fill:black;
}
}
#mobile-header.has-branding button.menu-toggle {
order: 0;
flex: 1 0 15%;
padding: 0 10px !important;
}
.site-logo.mobile-header-logo {
order: 1;
margin: 0 auto;
flex: 1 0 70%;
position: relative;
}
.menu-bar-items {
order: 2;
flex: 1 0 15%;
padding: 0 10px !important;
}
button.menu-toggle,
.menu-bar-items,
.site-logo.mobile-header-logo {
text-align: center;
display: flex;
justify-content: center;
}
nav#mobile-header .inside-navigation.grid-container.grid-parent {
position: relative;
}
button.menu-toggle span.gp-icon.icon-menu-bars {
margin: auto;
display: flex;
height: 100%;
}
}change it to:
@media (max-width: 768px) {
.main-navigation.has-branding .inside-navigation.grid-container {
flex-wrap: nowrap;
background-color: white;
}
nav#mobile-header .menu-bar-items span.gp-icon svg {
fill: black;
}
#mobile-header.has-branding button.menu-toggle {
order: 0;
flex: 1 0 15%;
padding: 0 10px !important;
}
.site-logo.mobile-header-logo {
order: 1;
margin: 0 auto;
flex: 1 0 70%;
position: relative;
}
.menu-bar-items {
order: 2;
flex: 1 0 15%;
padding: 0 10px !important;
}
button.menu-toggle,
.menu-bar-items,
.site-logo.mobile-header-logo {
text-align: center;
display: flex;
justify-content: center;
}
nav#mobile-header .inside-navigation.grid-container.grid-parent {
position: relative;
}
button.menu-toggle span.gp-icon.icon-menu-bars {
margin: auto;
display: flex;
height: 100%;
}
}Hello, thanks, but nothing changed when replacing with the suggested CSS.
Add this CSS:
#mobile-header .menu-bar-items a {
align-items: center;
display: flex;
}
nav#mobile-header .inside-navigation {
padding-right: 20px;
}This fixed it. Thank youuu!
Actually, now I noticed that despite everything showed great while logged in as an admin for mobile and the extra space is removed https://prnt.sc/xRloQwz-9mUZ, in incognito the extra space is gone but the search and cart icons are too close to each other https://prnt.sc/RhVOI-1RmoOZ