Logo in header position

[AmberWilkinson]

My logo in header on pages other than home is covered by menu HOME - how do I fix this?

Link is https://shoptroycassardaley.com.au/collections/clothing

[DaisyVo]

Hi @AmberWilkinson 

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (min-width: 990px) {
    body .header:not(.header--middle-left) .header__inline-menu {
        margin-top: 1.05rem !important;
    }
.header:not(.header--top-center) *>.header__search {
    margin-top: 0 !important;
}
}

 

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
@media screen and (min-width: 990px) {
    .header:not(.header--middle-left) .header__inline-menu {
        padding-left: 70px;
    }
}
</style>

Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[websensepro]

Hi @AmberWilkinson 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

If you want the alignment of Logo like in the picture above, please write this code.

@media(min-width:990px){
a.header__heading-link.link.link--text.focus-inset {
    margin-bottom: 38px !important;
}
}

OR

If you want the alignment of Logo like in the picture above, please write this code.

@media(min-width:990px){
ul.list-menu.list-menu--inline {
    margin-left: 87px !important;
}
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[ZestardTech]

Hello @AmberWilkinson ,

Here are the steps to apply the necessary changes in your Shopify store:

1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
2. Locate Asset > base.css and paste the following code at the bottom of the file:

.header--top-left, .header--middle-left:not(.header--has-menu) {
    display: flex;
    width: 100%;
    gap: 20px;
    align-items: center;
}
nav.header__inline-menu {
    flex: 1 0 0 !important;
}
.header:not(.header--middle-left) .header__inline-menu {
    margin-top: 0!important;
}
.header--top-center>.header__search, .header:not(.header--top-center) *>.header__search {
    margin-top: 0!important;
}
.header__icons {
    margin-top: 0 !important;
}

Let me know if you need further assistance!