Docs

[John W]

some help would be greatly appreciated I need to change the colour, style and look of the menu bar on bigbud.co.uk what do I do ??

[Senthil]

Hi John,

Thanks for writing in!

Please describe how would you like to change the menu bar.
DO you want to change the color only or style too? If so can you show example or describe it please.

Thanks!

[John W]

I want to make it look and behave like the menu bar on this website

http://www.growell.co.uk

[John W]

any ideas ?

[Rad]

Hi John,

You mean the gradient background of the menu? You can add this css at your customizer’s custom css with your preferred color.

.x-navbar-inner {
background: #d2ff52; /* Old browsers */
background: -moz-linear-gradient(top,  #d2ff52 0%, #91e842 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2ff52), color-stop(100%,#91e842)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #d2ff52 0%,#91e842 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #d2ff52 0%,#91e842 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #d2ff52 0%,#91e842 100%); /* IE10+ */
background: linear-gradient(to bottom,  #d2ff52 0%,#91e842 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842',GradientType=0 ); /* IE6-9 */
}

This should help you deciding which gradient best for your http://www.colorzilla.com/gradient-editor/

Hope this helps 🙂

[John W]

thats a start but how do I add the separators, the text on two lines and the colour change when I mouse over

[Nico]

Hi there,

You can add something like this code in your custom CSS:

.x-navbar .desktop .x-nav>li{
url(yourseparatorimagepathhere.gif) 100% 0 no-repeat;
}

hope it helps thanks.

[Christophe D]

perfect, thanks !

[Thai]

You’re most welcome 🙂

If you need anything else, please let us know.

[Kenneth]

Is there a way to make the menu bar similar to this one http://www.studio540.com/ ?
With the image and then the sticky bar?

[Christopher]

Hi there,

Please add a slider below masthead and select ‘Fixed top’ position from Customize -> Header, then provide us with URL to help you with its style.

Thanks.

[Author]

Posts