Change Background Colour of TOP NAV MENU

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

1/16/2021 9:16:59 AM
Gravatar
Total Posts 42
Microquiz

Change Background Colour of TOP NAV MENU

Hello,

Does anyone know how to change the background colour of the Top Nav (Main Site Menu)?  "Been looking at scripts for hours".

I am using the Scout Skin (But I am sure the solution would work for all skins).

Can you Help Please?

Best Regards

1/16/2021 3:49:32 PM
Gravatar
Total Posts 42
Microquiz

Re: Change Background Colour of TOP NAV MENU

I have a solution (but be aware I am not an expert at coding).

For a red background in the main (Top) site menu:

In (Skin)layout.master
change: 

" <header class="head" role="banner"> "

to

" <header style="background-color:Tomato; class="head" role="banner"> "

In theme.skin

change

" RootUlCssClass="nav navbar-nav sm sm-clean" "

to

" RootUlCssClass="nav navbar-nav sm sm-red" "

"This works for me"

1/18/2021 5:00:12 AM
Gravatar
Total Posts 42
Microquiz

Re: Change Background Colour of TOP NAV MENU

In (Skin)layout.master
change: 

<h-e-a-d-e-r class="head" role="banner">

to

<h-e-a-d-e-r style="background-color:Tomato; class="head" role="banner">

Note: please take out the "-" in h-e-a-d-e-r  (The forum would not let be publish word <header .......

1/21/2021 9:23:51 AM
Gravatar
Total Posts 2183

Re: Change Background Colour of TOP NAV MENU

Hi Ray,

The best way to do this would be in CSS. 

  1. In the root of the skin's folder, open the skin.config file and uncomment this line:
    <!-- <file>style-site.css</file> -->
  2. Create a file in the root of the skin's folder named style-site.css and add the following to it:
    .head { background-color: Whatever-Color-Value-You-Want; } 
  3. Go to Administration > Design Tools > Cache Tool and click the "Reset Skin Version Guid" button.

Hope this helps,
Joe