Change the Style of a Single Menu Item - Dawn 2.0

[JonCarag]

Hello,

I would like to change the font style of my "Buy" header menu item so it stands out from the rest of the menu.  Preferably make the text bold and a 16 pt font size.  While were at it, is there a way to create a rectangular border around it too so it looks like a button?  I've seen other threads but none of the solutions changes appear to work for my store.  I have a Dawn 2.0 theme.

www.pyrofirebowls.com

Thanks!

[made4Uo]

Hi @JonCarag 

Please follow the instructions below

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Asset folder, open the base.css
3. Paste the code below at the very bottom of the file.

#shopify-section-header > sticky-header > header > nav > ul > li:nth-child(1) > a > span:after {
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid;
    position: absolute;
    padding: 10px 18px;
    left: -4px;
    top: -3px;
}

#shopify-section-header > sticky-header > header > nav > ul > li:nth-child(1) > a > span {
    font-weight: 600;
    font-size: 14px !important;
    position: relative;
}

[JonCarag]

Hi @made4Uo .  Thank you for your quick response.  I added that code to the bottom of the base.css page and unfortunately, it did not work.  Do you have any other recommendations?

[PageFly-Richard]

Hi @JonCarag!

I`m Richard Nguyen from PageFly - Advanced Page Builder. I would love to give you some recommendation.

Yes please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

#shopify-section-header>sticky-header>header>nav>ul>li:nth-child(1)>a>span {
font-size: 16px !important;
border: 1px solid black;
}

Best Regards;

Richard-Pagefly

[JonCarag]

Hi @PageFly-Richard Unfortunately that did not work either.  In case it matters, I also wanted to point out that I have the following custom code already added to base.css in order to change the font, font size and add hover text color to the header menu:

.header__menu-item.header__menu-item {
font-size: 50px !important;
}
.menu-drawer__menu.list-menu li *{
font-size: 10px !important;
}

.list-menu--inline span {
font-family: 'Roboto';
font-size: 14px !important;
font-weight: bold;
text-transform: uppercase;
}

nav.header__inline-menu .header__active-menu-item {
color:#E66401 !important;
}
nav.header__inline-menu ul li :hover {
color:#E66401 !important;
}
.header__menu-item:hover span {
text-decoration: none;
}

.footer-block__details-content .list-menu__item--link:hover, .copyright__content a:hover{
text-decoration: none !important;
}

[PageFly-Richard]

Hi @JonCarag 

Can you please show me  where you added my code? Please ensure that you add at the end of the file. Thank you

Best regards,
Richard | PageFly

[JonCarag]

Hi @PageFly-Richard 

See screenshot below:

[PageFly-Richard]

@JonCarag 

It seems you have not saved the base.css file

Regards,
Richard | PageFly

[JonCarag]

@PageFly-Richard So I've been having issues today with saving the code file.  Every time I click save I get a red error message saying there was an issue saving the file and I should try again in a few minutes.  Not sure if it's a Shopify issue or something with my code.  I didn't think it affected anything because I tested changing the font sizes of all the menu items and once I clicked save and got the error message, the font size did actually change when I refreshed the live page.  Anyways, I've restarted my browser and computer and keep getting the error message.  Guess I'll wait until tomorrow to try again.  Note that the code still saves within the script when I enter back into the base.css file, so for those reasons I still think it's saving...

[PageFly-Richard]

Hi @JonCarag!

Your code seems fine. It seems issue from shopify side. Please clear your browser's cache and cookies and check again or try again in incognito mode. Thank you

Best Regards;

Richard-Pagefly

[JonCarag]

Hi @PageFly-Richard 

So my code is now saving without any error but I still do not have a border around the menu item.

[made4Uo]

Hi @JonCarag,

Please try to add the code provided at the very bottom of the base.css

[JonCarag]

Hi @made4Uo are you referring to the previously provided code by @PageFly-Richard ?

If so, this code is at the bottom.  I'm not sure where the disconnect is or why it's showing that it's not but I've pasted it all the way at the bottom.