Desktop Menu Transparent

  • Resolved Mariah Kohl

    (@marikyu14)


    5 years, 3 months ago

    Hi,

    I’d like to make the black menu bar transparent so the header image is behind it, but when you scroll down, keep the black bar. I’m assuming I’ll have to change some features in my current custom css. Below is what I currently have set.

    .site-info{display: none;}
    .aiovg .aiovg-play { background: transparent !important; }
    .header-top {
    background-color: #000000!important;
    }
    .main-navigation ul li:hover > a {
    background: #000000;
    color: #009ee2;
    }
    .main-navigation ul li.current_page_item > a, .main-navigation ul li.current-menu-item > a, .main-navigation ul li.current_page_ancestor > a {
    background: #000;
    color: #009ee2;
    }
    .main-navigation ul.nav-menu li a:focus {
    outline: none;
    }

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • This is a bit trickier (hence all the !importants overriding other importants), but you can try this with your CSS:

    .header-top, #masthead .wrap {
	background-color: transparent !important;
}

.custom-header-image {
    margin-top: 0px !important;
}

.site-header-fixed {
	background-color: black !important;
}

    Hoping it helps — good luck!

    Thread Starter Mariah Kohl

    (@marikyu14)

    Thanks! I’ve actually just changed themes, but if I decide to go back to lodestar, this will definitely help ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Desktop Menu Transparent’ is closed to new replies.