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.

This thread is closed to new posts. You must sign in to post in the forums.
1/16/2021 9:16:59 AM
microquiz
Gravatar
Total Posts 46
View Posts
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
microquiz
Gravatar
Total Posts 46
View Posts
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
microquiz
Gravatar
Total Posts 46
View Posts
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
Joe Davis
Gravatar
Total Posts 2239
View Posts

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

 
 
 
You must sign in to post in the forums. This thread is closed to new posts.