Transparent Sub-menu

  • Resolved christiancfr

    (@christiancfr)


    6 years, 11 months ago

    Hi, I’m making a transparent menu and i’ve almost got it, but i’m having problems with the submenu. When i’m in the home page, everything is ok, but as soon as i enter a link from the submenu (ie. example.com/#service/item1), the background color from the dropdown menu changes from transparent to #3f3f3f.

    Ok in the Home Page: https://ibb.co/d1rSTn
    Transparent Background changes when not in Home Page: https://ibb.co/kUAbM7

    The CSS code i have is:

    /*--- Custom Nav Bar GP ---*/

@media (min-width: 769px) {
    .main-navigation {
				background-color: transparent;
		} 
  
  	.main-navigation .main-nav ul li a, 
		.main-navigation .menu-toggle {
				color: white;
		}
  
  	.main-navigation .main-nav ul li:hover > a, 
		.main-navigation .main-nav ul li:focus > a,
		.main-navigation .main-nav ul li.sfHover > a {
				color: #f7323f !important;
				background-color: transparent;
		}
  
  	.main-navigation .main-nav ul ul li a {
				background: rgba(0, 0, 0, 0.75);
				color: white;
		}
  
  	.main-navigation .main-nav ul ul li:hover > a, 
		.main-navigation .main-nav ul ul li:focus > a,
		.main-navigation .main-nav ul ul li.sfHover > a {
				color: #f7323f;
				background-color: rgba(0, 0, 0, 0.75);
		}
  }
/*--- Custom Nav Bar GP END ---*/

/*--- Transparent Nav Bar GP ---*/

.site-header {
  	background-color: transparent !important;
  	z-index:1;
	}

.main-navigation ul li.current-menu-item a {
  	background-color: transparent !important;
 	}

/*--- Transparent Nav Bar GP END---*/

    The website is not live yet, so i can’t provide a link. Please help me.Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Tom

    (@edge22)

    Strange, this part of your CSS should prevent that:

    .main-navigation ul li.current-menu-item a {
    background-color: transparent !important;
}

    Unfortunately I’m not able to tell why it’s not working without seeing the site. Any chance you can throw it up on a live server?

    Thread Starter christiancfr

    (@christiancfr)

    Hi tom, thanks for the answer. Unfortunately, I couldn’t make my site live, so i kept on trying. Finally i got it to work, i just had to add this code to the end:

    .main-navigation .main-nav ul li[class*="current-menu-"] > a {
		background-color: transparent !important;
 	}

    Now it’s working ok!

    Theme Author Tom

    (@edge22)

    Awesome ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Transparent Sub-menu’ is closed to new replies.