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

[Ying]

Hi Georgi,

Can you link us to your site again as the topic has been marked as resolved?

Let me know!

[Georgi]

I’ve added it in the private area. Thank you!

[Fernando]

Hi Georgi,

Can you try adding this inside your mobile media query to add a little bit of spacing, and see if it works for you?:

.menu-bar-items > *:not(:last-child) {
    padding-right: 10px;
}

This is how it looks on my end: https://share.getcloudapp.com/eDul4lYL

Kindly let us know how it goes. 🙂

[Georgi]

Hi Fernando,

It works! 🙂

Í’m wondering how can the search and cart icon swap their positions so that the cart is on the right and the search is on the left for mobile? https://prnt.sc/b1Z9Fchah1DB

Can you help with that?

[David]

Hi there,

try adding this:

.main-navigation .menu-bar-item.wc-menu-item {
    order: 20;
    padding-left: 10px;
    margin-left: 10px;
}

[Georgi]

Thanks, David!!

I realize now that both icons on the right side take more space, moving the logo from the center.
How can the account icon be added next to the menu for mobile?

[Ying]

How can the account icon be added next to the menu for mobile?

You’ll need to create another hook element, add the account icon code to the hook, choose generate_menu_bar_item has the hook name, choose entire site as location.

<span class="account-icon hide-on-desktop hide-on-tablet">
  <a href="your-login-link ">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 256c70.7 0 128-57.31 128-128s-57.3-128-128-128C153.3 0 96 57.31 96 128S153.3 256 224 256zM274.7 304H173.3C77.61 304 0 381.6 0 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304z"></path></svg>
  </a>
</span>

[Georgi]

Thanks, Ying.

I did it but the account icon showed up on the right and is really big 😀 https://prnt.sc/F1oYhYYFcl_5

[Ying]

Change 25px in this CSS to 1em:

span.account-icon svg {
    width: 25px;
}

[Georgi]

It worked. And how to move it t next to the menu icon?

[Ying]

I misread your request, can you change the hook to generate_inside_mobile_header?

[Georgi]

I did it but it moved the account icon on the other side on the left on the menu, not on the right and it’s not on the same axis with all elements https://prnt.sc/QEhnQoS67uF_

[Fernando]

Hi Georgi,

You’ll need to modify the order. Here is a code you can base of from to modify your current CSS:

nav#mobile-header .mobile-header-logo{
    order:2;
}

nav#mobile-header span.account-icon {
    order:1;
}

nav#mobile-header span.account-icon a {
    display:flex;
    align-items:center;
}

I’ve also added code here to center the acount icon.

Hope this helps! 🙂

[Georgi]

Hi Fernando,

So it’s just enough to add this code now in the Customizer or I need to replace with some of my current CSS?

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

nav#mobile-header .mobile-header-logo{
    order:2;
}

nav#mobile-header span.account-icon {
    order:1;
}

nav#mobile-header span.account-icon a {
    display:flex;
    align-items:center;
}

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

#mobile-header .menu-bar-items a {
    align-items: center;
    display: flex;
}

nav#mobile-header .inside-navigation {
    padding-right: 20px;
}

.main-navigation .menu-bar-item.wc-menu-item {
    order: 20;
    padding-left: 05px;
    margin-left: 07px;
}

    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: 55px;
}

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

span.account-icon svg {
    width: 1em;
}

[Fernando]

Yes, except for one thing.

I noticed you already have this code in you mobile query:

.site-logo.mobile-header-logo {
        order: 1;
        margin: 0 auto;
        flex: 1 0 70%;
        position: relative;
    }

With this, you can omit this from my code:

nav#mobile-header .mobile-header-logo{
    order:2;
}

And edit your current code to:

.site-logo.mobile-header-logo {
        order: 2;
        margin: 0 auto;
        flex: 1 0 70%;
        position: relative;
    }

Hope this helps! 🙂

[Author]

Posts