header customisation

[brandonkyt]

Hi 

I would like:

The height of the header to be 50px on all pages

The cart icon to say 'Cart (0)'

The account icon to say 'Account'

Any help would be greatly appreciated!


https://4hl6tt8p7sag5076-70626345282.shopifypreview.com

[topnewyork]

Hello,

1) Go to Online Store
2) Edit Code
3) Find theme.css/base.css file
4) Add the following code in the bottom

header.header.header--middle-center.header--mobile-center.page-width.header--has-menu.header--has-account {
    height: 50px !important;
}

Thanks!

[brandonkyt]

hi, thanks... the header is now 50px but the content inside is not not aligned center 

[brandonkyt]

but weirdly enough on every other page it is fine @topnewyork 

[brandonkyt]

as you can see here @topnewyork 

[topnewyork]

let me check

[topnewyork]

#shopify-section-template--23663895937346__background_video_CMJRwz h1 {
    color: #fefffc !important;
    text-align: center;
    font-family: "FTRegolaNeue-Semibold", sans-serif;
    font-size: 4rem !important;
    font-style: normal;
    letter-spacing: 0px;
}

[Mehran_Ali]

Hi @brandonkyt 

add This CSS it will help you to show the account and cart but not desire what you are looking for because the thing you looking for for that we have to modify the liquid code in the header.liquid for that I need the collaboration access if you can provide me I will make that for you

header.header {
    max-height: 50px;
}

header.header .header__heading {
    height: 50px;
}

header.header .header__heading .header__heading-link,
header.header .header__heading .header__heading-logo-wrapper,
header.header .header__heading .header__heading-logo{
    height: 100%;
}

header.header .header__icons .header__icon .visually-hidden {overflow: unset;width: 100%;height: 100%;margin: 0;clip: unset;position: unset !important;}
header.header .header__icons .header__icon.header__icon--account, header.header .header__icons #cart-icon-bubble {width: 100px;}

[brandonkyt]

as you can see here weirdly it is fine on other pages but not the home page

[Mehran_Ali]

Did you use the CSS code I provided you it worked on the developer Tool here is the result

[brandonkyt]

hi yes i have done that it looks better but if you flick through the pages the header still slightly changes in height