Docs

[Eric]

Hi I have a client that wants to change one link in the main nav to be a different color or bold. Is this possible?

[Prasant Rai]

Hello Eric,

Thanks for writing in!

Yes, its very much possible. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[Eric]

This reply has been marked as private.

[Rahul]

Hey Eric,

To make a menu item bold, please use or add the code below in the Customizer > Custom > CSS.

.x-navbar .x-nav > li#menu-item-464 > a {
font-weight: bold;
}

Notice menu-item-464. That is the ID of your menu item. To get that, right click on the menu item and select Inspect Element using Google Chrome browser (see menu-item-464).

Thanks.

[Eric]

Awesome. Thank you!!

[Rahul]

You are most welcome!

[Lely]

You’re welcome Eric!

Cheers!

[Eric]

Thanks again for your support. One last question about the navigation. She has a very word nav bar and I would like for it to break to the mobile nav button before 980 pixels. I have added what I found in the forum here, but it didnt work. Is there something else I can do?

This is what I added and didn’t change anything:

@media (max-width: 1070px){ <— this is probably a good width to change to.
.x-nav-wrap.desktop{
display:none
}

.x-nav-wrap.mobile{
display:block
}

.x-nav-wrap.mobile.collapse{
display:none
}

.x-nav-wrap.mobile.collapse.in{
display:block
}

.x-btn-navbar {
display: inline-block;
}

.x-navbar-inner {
text-align: center;
}

}

[Joao]

Hi There,

Please try using this code instead:

@media (max-width:  1024px) {
	.x-navbar {width: auto;}
	.x-navbar-fixed-left {border-right: 0;position: relative;}
	.x-navbar-fixed-left .x-brand {float: left;}
	body.x-navbar-fixed-left-active {padding: 0;}
	.masthead-inline .x-btn-navbar.collapsed, .x-btn-navbar {display: block;float: right;margin-right: 25px;}
	.x-nav-wrap.desktop {display: none;}
	.x-nav-wrap.mobile {padding-left: 60px;padding-right: 60px;}
	.x-nav-wrap.mobile.collapse.in {display: block;}
        
}

Hope that helps,

Joao

[Eric]

Worked! Thank you!

[Christopher]

You’re welcome.

[Author]

Posts