Debut Navigation Bar - Font, Font colour, Navigation background colour

[Lynny]

Hi All

The font of my navigation is the same font the Body Text font. I don’t want to change this font from Basic Commercial Light because I like this being the font for text in other places on the store like product description. I do however want to make the font of the navigation bar Swiss 721 Rounded Bold, I want to change it to colour #9371ad and have a solid background colour ONLY on the navigation portion #f9d2e9.

What it currently looks like:

What I’d like it to look like:

I don’t know how complex this kind of change is. If it is more than a simple change please let me know.

Thanks

https://cutieluxe.com/ Password cute1

[Zworthkey]

@media screen and (min-width: 500px){
.site-nav {
    margin: 5;
    background-color: pink;
    font-weight: 400;
}
}

Add this code in theme.css or theme.scss

[dmwwebartisan]

@Lynny

Please add the following code at the bottom of your assets/theme.css file.

.site-nav--centered .site-nav__link {
    font-family: "Swiss 721 Rounded Bold" !important;
    color: #9371ad !important;
}
@media screen and (min-width: 500px){
.site-nav { background-color: #f9d2e9; }
}

Hope this works.

Thanks!

[dmwwebartisan]

@Lynny

Remember you have to upload " Swiss 721 Rounded Bold" font file(.woff) and put the font-face code in css to use this font.

[Lynny]

hi @dmwwebartisan

Ok, I’ve got the Swiss 721 Rounded Bold in woff format, where exactly do I upload this to and does it need to have a specific filename?

Thanks

[dmwwebartisan]

@Lynny

You need to upload those .woff files into Assets folder and follow the instructions of below guide.

https://support.weareunderground.com/article/272-how-do-i-add-a-custom-font-to-my-theme

Hope this helps.

[Lynny]

Hi @dmwwebartisan I’ve uploaded the font into assets. I don’t however have Assets > stylesheet.css.liquid Can I add the font-face code to theme.css or another spot?

Thanks

[dmwwebartisan]

@Lynny

Yes, right. Please add the font-face code into theme.css file.

That will work.

[Lynny]

Thanks so much @dmwwebartisan !!

I decided to make the navigation font white, which did also change the font colour of the drop down menu to white.

How can I change the font and colour of the drop down menus?

Also, the navigation menu has the text towards the top of the purple bar, is there a way to center it?

Thanks

[dmwwebartisan]

@Lynny

Please add the following code at the bottom of your assets/theme.css file.

@media screen and (min-width: 500px){
a.site-nav__link.site-nav__child-link {
    color: #000 !important;
}
ul#SiteNav {
    padding: 8px;
}
}

Hope this works.

Thanks!

[Lynny]

Thanks @dmwwebartisan that worked perfectly