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

[Georgi]

Thanks for tidying up 🙂

The code works, it placed the account icon on the right side of the menu but I see that the cart has moved out of the screen for mobile: https://prnt.sc/aXgJBUsnkkV-

So I remember we added some CSS for padding before and removed the padding from it:

    .menu-bar-items {
        order: 2;
        flex: 1 0 15%;
        padding: 0 0px !important;
    }

But the cart is still too close to the side https://prnt.sc/orlYmdb28oGU

How can there be some space between the cart and the wall on the right like there is on the left side with the menu?

[Fernando]

I can see that you have this code inside the @media (max-width: 768px) query:

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

This is what is being used to add padding.

You can add a new media query to resolve this:

@media (max-width:375px){
    nav#mobile-header div.inside-navigation {
    padding-right: 30px;
    }
}

Kindly modify the values to your preferred values. Take not that you shouldn’t place this inside the @media (max-width: 768px) query.

Hope this helps! 🙂

[Georgi]

I added the exact CSS you gave at the bottom in the Customizer and played with the values but nothing changes :/

[Fernando]

I can see that you’ve added the code and it’s working from my end.

See: https://share.getcloudapp.com/JruGr7m9

I can also see that there are some other changes in your nav one screens widths 376-768, perhaps you added/edited or removed something? Or there’s a syntax error. Kindly check as the code I provided shouldn’t be causing this. 🙂

Hope this helps! 🙂

[Georgi]

I can’t see it in incognito. The caching plugin is deactivated so it should be visible..
Only thing I removed and changed since your prevous reply is the CSS you suggested to be removed

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

I don’t know really..

[Ying]

The icons goes to or out of the edge is because of this CSS:
https://www.screencast.com/t/gDNd5LT552

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

Try lower the flex-basisvalue which is set to 70% currently.

[Georgi]

I managed to make it look good on mobile using the way you suggested but when I stretch to a tablet, it looks like this: https://prnt.sc/Lohwm_LAZAbn

:/

[Ying]

You can try add different media query to the CSS for mobile/ tablet to reach the result you want.

[Georgi]

I added:

@media (max-width:375px){
.site-logo.mobile-header-logo {
    order: 2;
        margin: 0 auto;
        flex: 1 0 62%;
        position: relative;
    }

and I have the same CSS for the @media (max-width: 768px) { only with a different value for flex.

For the 768 px screen the cart and search are looking ok https://prnt.sc/Dj8K1g0MJ8xM
But when I switch to 375 px it looks distorted no matter how many times I play with the value: https://prnt.sc/TfA5or4Ygks2

Help me please 🙁

[Fernando]

Hi Georgi,

Maybe you can modify this CSS code in your 768px media query:

.menu-bar-items {
        order: 2;
        flex: 1 0 15%;
        padding: 0 10px !important;
    }

to something like this:

.menu-bar-items {
        order: 2;
        flex: 1;
    }

Then you can add padding to the mobile header like:

nav#mobile-header > div.inside-navigation {
    padding: 0 10px;
}

Hope this helps! 🙂

[Georgi]

Hi Fernando,

Thanks for the input. I applied the changes you said but the effect was reversed – for 375 px it looks normal https://prnt.sc/s7VWsNBoz8vt while for 768 px the cart, search and account icons are not in place https://prnt.sc/vaVOB_E9UpZw

[Ying]

Under the 768px media query, change the flexof menu-toggle to1 0 50px, and change the flex of mobile-logo to1 0 calc(100% - 130px)

[Georgi]

Wow, this looks better now 🙂 Thank you.

Just a quick question – this is how the second change in CSS should look like?

.site-logo.mobile-header-logo {
        order: 2;
        margin: 0 auto;
        flex: 1 0 calc(100% - 130px);
        position: relative;
    }

[Ying]

Correct, mobile-header-logo it is 🙂

[Georgi]

Something that bugs me since we moved the account and cart in the header – when I’m logged in as admin in dekstop, the icons are almost together https://prnt.sc/YGbULvB5h-vZ but as a visitor they look alright https://prnt.sc/i5b-QULCkKlL I cant see a reason why is that?

[Author]

Posts