Creating a transparent topmenu
  • 05 Oct 2022
  • 1 Minute to read
  • Dark
    Light
  • PDF

Creating a transparent topmenu

  • Dark
    Light
  • PDF

Article summary

Sometimes you will want to make the topmenu transparent so the website banner details can be seen underneath. There are a number of existing  css classes you can modify to create a transparent topmenu, as well as restore the menu background color when you scroll down the page.


Example Transparent Topmenu

 


Topmenu background color restored when scrolling - you need to do this so the menu links are readable when scrolling down the page 

 

Place the following CSS styles in the Global CSS File to create a transparent topmenu: 

#ctl00_topheader { //make the menu background transparent    background: transparent!important;}#topmenu>li a { //make the menu link background transparent    background-color: transparent!important;}.minor_nav { //Make the login and phone number background trasparent    background-color: transparent!important;}#menuContainer.affix { //Change the background color when scrolling    background-color: #fff!important; // Your background color here}





Was this article helpful?