Overlaying Menu bar over header image

Hey guys!

I’m trying to make my menu bar completely transparent so that it shows my site’s logo and the menu links over the actual background.
Sort of what like they have done:
http://muninp.pnec.nust.edu.pk/

Ive already tried using;

.page-template-page_front-page-php #header {
   position: absolute;
   width: 100%;
   background-color: rgba(255,255,255,0);
}

but it doesn’t work.

Also I would like to make it such that when the cursor is hovered an a menu option, the entire menu block sort of like what this site has;
http://arbor-pacific.com/

Any help would be appreciated. Thank you.

P.S. I’m using the Moesia Theme.
My site:
http://ashraepnec.org/

Hello there,

From where did you pull out that custom css? Use google chrome developer tools in order to inspect selectors inside the theme.

Apply custom css code below and adjust it to your needs:

/*transparent menu*/
@media screen and (min-width: 992px) {
    .sticky-wrapper {
        background-color: rgba(255,255,255,0);
        position: absolute;
        width: 100%;
    }

    .top-bar {
        background-color: rgba(255,255,255,0);
        width: 100%;
    }
}

/*menu hover background*/
.main-navigation li:hover {
    background-color:#dcdcdc;
}

Please note that, we are not in position to provide such modifications, and if you need more of this, please contact Codeable.

All the Best!

Thank you very much.
I appreciate it. :slight_smile:

P.S.
I’m new at web design and CSS. How do I get to know the selector of the element I want to style?
For example, I need to edit a button, so how do I determine its selector?

You’re welcome,

Well, you have to learn to use chrome developer tools on your own, when inspecting each element you can determine all element selectors. Try to search for some tutorial on youtube for example: https://www.youtube.com/results?search_query=developer+tools

All the Best!