Change Header effects and text colour on Horizon theme

Shopify Discussion
, , , ,
1

Hi team,

I am trying to 1. remove the header hover effect and 2. make the menu text larger and permanently white. This needs to be so across all pages. Having a lot of trouble finding the correct identifiers in css to do this. Thanks in advance.

https://ozbullets.myshopify.com/

password: uwahlt

2

Hey @rlucca95

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>
:is(.menu-list:where(:has(.menu-list__list-item:hover)),.menu-list:where(:has(.menu-list__list-item:focus-within)),.menu-list:where(:has(.menu-list__list-item:not([aria-hidden=true]) .menu-list__link--active))) .menu-list__link {
    color: white !important;
}
header-component#header-component .header__underlay.header__underlay-closed {
    background: transparent !important;
}
</style>

RESULT:

image
image1904×909 354 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

3

G’day @rlucca95 ,

To remove the dropping transparency, you can go to the header-menu.js file and change this line: this.style.setProperty(‘–submenu-opacity’, ‘1’); to this.style.setProperty(‘–submenu-opacity’, ‘0’);

Should do the trick. If you’re feeling more comfortable, it might be worth checking out that whole function and removing it, no need to run it if you don’t want to use it.

As for the menu text, look in style.css for menu-list__link-title, you should be able to find the settings there to change the size and colour. You might have to do it in a few places, looks like some “logic” is taking place - probably to do with the transparency.

4

I’d rather suggest this CSS code:

.header__underlay {
  display: none;
}

.header__row {
  --color-foreground-rgb: 255 255 255;
  --color-foreground: rgb(255,255,255);
  --header-background: transparent;
  /* for cart bubble */
  --color-primary-button-background: rgb(255,255,255);
  --color-primary-button-text: rgb(0,0,0);
}

Can go into “Edit theme”-> “Theme settings” (cog icon) → “Custom CSS” or “Custom CSS” of the header section.

5

Perfect once again Tim! What css would i use to increase font size of the head?

6

Ah, yes, also add this:

overflow-list {
  --menu-top-level-font-size-desktop: 1.5rem; /* default is 1.125rem */
}

Relevant solution – Mobile Menu Font Size Adjustment – Horizon Theme - #2 by tim_tairli

7

Thank you Tim! You are awesome.

8

sorry tim, couldnt get that last one to work.

9

I do not see it in your store – you were unable to save after Custom CSS change?

10

Ive put the code back into the header css and have saved the site. I tried fiddling around with it to get it to work.

11

Oops, my bad, the property should be --menu-top-level-font-size-desktop – I’ve amended the code above

Copied a wrong rule :slight_smile: