"Sticky bar", "Nav menu", "Principal menu"....

Illdy
1

I would like to change the font size and color of the main menu (“sticky bar”) (it appears on two lines), but I do not know how. I would also like to change the speed of appearance of the “sticky bar”, as well as the color of the background. I tried to customize the code css, nothing has changed.
Thank you for your help.

2

Hi there

Hope you are having a good day and thank you for your question :slight_smile:
Can help you with the font size and bg color but not with the sticky header appearance > speed,
Please always include link to your website, i need to see it :slight_smile:
Thanks!
Colorlib Support Team

3

@Noda
Hi,
Thank you for your prompt response and your help. I am a beginner and therefore do not have the reflex to put the link of the site.
Can not we change the speed of appearance of the menu ?

4

Hi there,

Could you try this CSS for those changes:

#header .top-header .header-navigation ul li a{
	font-size:15px;
}

#header .is-sticky .top-header{
	background-color:red;
}

@media (min-width: 768px){
div.top-header div.container div.row div.col-sm-8.col-xs-4{
	width:80%;
}

div.top-header div.container div.row div.col-sm-4.col-xs-8{
	width:20%;
}
}

add it to appearance \ customize - additional css.
Hope this helps.

5

Hi,

“…Hope this helps…” Absolutely! This little piece of code works beautifully.
15 px does not allow me to display the entire menu, 13 px would be perfect if it did not make it unreadable by size. Would not it be possible to align it on the left to gain size, because by decreasing the text, it moves away from the logo?
Can we also play on the color of the text, transparency of the background, the progressiveness of the appearance of the menu scrolling?
Thank you for all.

6

hello my counter does not work although I did everything right. i need help please.

7

Hi @prodmov,

For those adjustments use this CSS:

#header .top-header .header-navigation ul li a{
	font-size:15px;
	color:red;
}

#header .is-sticky .top-header{
	background-color:rgba(0,0,0,0.7) !important;
}

@media (min-width: 768px){
div.top-header div.container div.row div.col-sm-8.col-xs-4{
	width:90%;
}

div.top-header div.container div.row div.col-sm-4.col-xs-8{
	width:10%;
}
}

That should allow bigger font size and also not place menu items on next row.
Also the font should turn red with this CSS.
Also make the background transparent.

progressiveness of the appearance of the menu scrolling - this is a bit beyond what we cover as support and if you need such modification then see fi the guys here can help - https://colorlib.com/out/envatostudio

@pinatam - could you open thread on this issue as it does not sound related to the current one.

Cheers.

8

Thank you very much. That’s exactly what I was hoping for. Congratulations for the quality of SiteOrigin support.
I will take a look at your link.
Best regards.

9

Hi, there

Ok, I will now close the topic and mark it as resolved. Feel free to contact us again Thanks!