Horizon Custom Header Menu Styling

Store Design
,
1

Hey team,

I have formatted my header menu so the font weight is 600. This works great on the homepage, but on other pages, it reverts back to its normal font weight of 400. How to make this more permanent across all pages?

Cheers

1 Like
2

I forgot to mention this is the url www.2ndhandfitness.com.au

Using Horizon theme

1 Like
3

This is very generalized. Could you be more specific? What exactly did you do? Where exactly did you do it? And why?

4

@RankConvert Follow these steps while selecting the “Body Font” or “Heading Font”

image
image368Ă—960 33.5 KB

5

hey @RankConvert try this one by follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body>tag if this code work please do not forget to like and mark it solution

<style>
span.menu-list__link-title {
    font-weight: 600 !important;
}
</style>

image
image1280Ă—114 25.2 KB

1 Like
6

thank you good sir this worked perfect

7

hey quick question, so this is the code i added to base.css

/*Header menu styling by RankConvert */

.menu-list__link-title {

position: relative;

display: inline-block;

font-weight: 500 !important;

padding: 0 6px; /* creates spacing buffer */

}

.menu-list__link-title::after {

content: “”;

position: absolute;

left: 6px;

right: 6px; /* instead of width: 100% */

bottom: -2px;

height: 2px;

background-color: #e71d2f;

transform: scaleX(0);

transform-origin: left;

transition: transform 0.25s ease;

}

/* Hover */

.menu-list__link:hover .menu-list__link-title::after {

transform: scaleX(1);

}

/* Active */

.menu-list__link[aria-current=“page”] .menu-list__link-title::after {

transform: scaleX(1);

}

all the other things like the hover underline and stuff worked fine across all pages. Why did the font weight not work so?

Also, the code you provided, it seems to not work if i change the font weight to 500, it only works on 600

8

hey @RankConvert it is a common problem with fonts file some time it is not loaded properly that’s why it is not work properly in front page and all pages
so feel free if you have any question about it

9

I made a mistake I want to make the font weight for the menu 500, but your code is not working, how to fix?

11

mustafa my linkedin is jake marler, digital growth expert, add me