[Resolved] Login, Search & Cart Icons in the Header for Desktop

[Ying]

Oops there’s an error in this CSS:
https://www.screencast.com/t/DYTLDJopu

Remove the extra . should fix the problem.

[Georgi]

This moved it next to the cart but on the right side https://prnt.sc/S_vjEoO8E7jD 😀
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.

[Ying]

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.

[Georgi]

Thanks, Ying, this worked quite well! 🙂

If I want to change the two icons color to black, how can it be done?

[Ying]

You can control the color at customize > colors > header > link.

[Georgi]

Thanks 🙂

If I want change the two icons size to be a little bigger, how can it be done?

[Ying]

Try this：

.site-header .gp-icon {
    font-size: 23px;
}

[Georgi]

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.

[Ying]

You can remove the line-height CSS, add some margin to adjust the position:

span.account-icon.gp-icon {
    margin-bottom: 5px;
}

[Georgi]

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;
}

[David]

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%;
    }

}

[Georgi]

Hello, thanks, but nothing changed when replacing with the suggested CSS.

[Ying]

Add this CSS:

#mobile-header .menu-bar-items a {
    align-items: center;
    display: flex;
}
nav#mobile-header .inside-navigation {
    padding-right: 20px;
}

[Georgi]

This fixed it. Thank youuu!

[Georgi]

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

[Author]

Posts