Menu on top of header

Hi! I would like to have my menu on top of my header not overlay! In big windows it is overlayed my header and I want to have it like in phones, just on top and not covering part of the image:

Also I wonder why the logo is changing sizes, Can I have it like here:

https://demo.athemes.com/airi-agency/

THANKS

Hi there,

You can configure the menu style from the Customize > Header > Menu > Sticky Menu > then choose Static Menu.

Regards,

It works, but now the style has change completly!

There are a few things that I want to change, can you help me?

  • I want the header to be black

  • to be the same size everytime (when I scroll down and when I make the window small) I want the logo to be medium all the time like here: https://demo.athemes.com/airi-agency/

  • And align the menu links to the right!

THANKS

Ok, let’s try to use this CSS code below, you can add it to Customize > additional CSS:

#masthead-sticky-wrapper {
    min-height: 84px !important;
}
.menuStyle2 .site-header, .menuStyle2 .is-sticky .site-header {
    background: black;
}
.site-header .custom-logo-link img {
    max-width: 80px;
}
.main-navigation {
    text-align: right;
    display: block;
}
.menuStyle2 .main-navigation a, .menuStyle2 .sticky-wrapper.is-sticky .main-navigation a {
    color: white;
}

I am so sorry for responding so late!

The code doesn’t change the color of the background anyways!
How can I change it to black

Hi,

Looks like there is duplicate code on your custom CSS code. Please try to find this code and remove them:

.menuStyle2 .main-navigation a {
    color: #191919;
}
.menuStyle2 .site-header {
    background-color: #fff;
}

If it still doesn’t work, please change the code from my previous reply with this:

#masthead-sticky-wrapper {
    min-height: 84px !important;
}
.menuStyle2 .site-header, .menuStyle2 .is-sticky .site-header {
    background: black !important;
}
.site-header .custom-logo-link img {
    max-width: 80px;
}
.main-navigation {
    text-align: right;
    display: block;
}
.menuStyle2 .main-navigation a, .menuStyle2 .sticky-wrapper.is-sticky .main-navigation a {
    color: white !important;
}

Regards,

Perfect! Now if I want the logo to be bigger and maintain the same size when scrolling what should I do?

THANKS

Try this:

.site-header .custom-logo-link img, .is-sticky .site-header .custom-logo-link img {
    max-width: 150px;
    width: 100%;
}

PERFECT! And 1 last thing about the menu:

Can I change the menu links to Caps and take away the red dots and implement the underline?

Here you go:

.main-navigation a {
    text-transform: uppercase;
}
.main-navigation .menu-item.current-menu-item a {
    border-bottom: 1px solid orange;
}
.menuStyle2 .main-navigation .current-menu-item:after, .menuStyle2 .main-navigation a:hover:after {
    display: none;
}