Refresh Theme - make top and bottom navigation link text bold

Store Design
1

Hi all,

My website is www.PennsylvaniaParks.org. I upgraded my theme to the Refresh theme. Love it. But one thing I think could be changed is the top and bottom navigations. I feel bold text would be much easier to read. So any help on how to make the top navigation and bottom navigation link texts bold would be greatly appreciated.

Thanks in advance :slightly_smiling_face:

1 Like
2

Hi @Justin34 ,

Im not sure which top and bottom link you like to bold, I think the header and footer navigation link?

If it is. Try this.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
ul.list-menu.list-menu--inline {
    font-weight: bolder;
}
.footer-block.grid__item.footer-block--menu {
    font-weight: bolder;
}

Result:

Ribe_Dagandara_0-1687730716519.png
Ribe_Dagandara_0-1687730716519.png876Ă—187 121 KB

Ribe_Dagandara_1-1687730728231.png
Ribe_Dagandara_1-1687730728231.png824Ă—221 10.7 KB

I hope it help.

1 Like
3

Thank you! That worked perfectly. Do you notice how the top navigation text isnt a solid black and the footer navigation isnt solid white? Or is that just my eyes? If im seeing that right, is there a way to make the top navigation solid black and the footer navigation a solid white? Thanks so much in advance.

1 Like
4

@Justin34

Please add the following CSS code to your assets/base.css bottom of the file.

@media screen and (min-width: 750px) {
.footer-block__details-content .list-menu__item--link {font-weight: bold !important;color: #fff !important;}
.header__menu-item {font-weight: bold !important; color: #000 !important;}
}

Thanks!

1 Like
5

Much better, thank you so much :slightly_smiling_face: