How do I change the top header section?

[funkyshirts]

HI All,

I am new here so will probably bombard you guys with a few questions.

I want to change my top header where it says HOME SHIRTS POLOS KNITWEAR CONTACT

1) I want to increase the size
2) When you hover over the word I want a solid black box to appear around it and the word colour to change to yellow

www.funkyshirts.co.uk

Thank You

[Moeed · Accepted solution]

Hey @funkyshirts 

Keep the previous code and add this new code above </style> in the end of theme.liquid file.

.header__active-menu-item:hover {
    color: yellow !important;
}

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Moeed]

Hey @funkyshirts 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.header__menu-item:hover {
    background: black !important;
    color: yellow !important;
}
.list-menu__item {
    font-size: 2rem !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[funkyshirts]

Hi,

Excellent stuff, it works thanks, the only little issue is that the word that is already selected does not change colour.

Thank You

Dan

[Moeed · Accepted solution]

Hey @funkyshirts 

Keep the previous code and add this new code above </style> in the end of theme.liquid file.

.header__active-menu-item:hover {
    color: yellow !important;
}

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[funkyshirts]

Thank you very much, i have one more question, On the mobile version when i click on the 3 lines is it possible for the menu to be black with yellow words instead of transparent? as it is overlaying and muddling at the moment? Thank You

[Moeed · Accepted solution]

Hey @funkyshirts 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.menu-drawer__account {
    color: yellow !important;
}
.list-menu__item {
    color: yellow !important;
}
.menu-drawer .list-social__link {
    color: yellow !important;
}
div#menu-drawer {
    background: black !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[funkyshirts]

excellent stuff really appreciate the help thank you

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.