Clear menu

The menu is transparent (or translucent), but it just doesn’t sit on top of the header image on those pages. Do you want the header image to be the same size as the homepage so that the menu sits on top of it?

Not necessarily, I like it the way it is, would prefer full image on homepage and not the others, but if the other way is easier, that could work as a backup. Just want the menu really to look a like in all pages.

• This reply was modified 6 years, 7 months ago by dadijensson.

Accidentally submitted this, LOL.

• This reply was modified 6 years, 7 months ago by dadijensson.

I’m not sure I understand the problem if you like it the way it is. Can you re-explain the issue?

I like everything the way it is, the menu sits perfect on all pages, just want the menu translucency to appear on all sites, not just the homepage, and would prefer that the header image stayed the way it is on the other pages.

I’m afraid I don’t understand. The navigation is translucent. When you put a translucent background on a white background, the effect is to turn the background a lighter colour – which is happening and you can see it is transparent when you scroll down.

Ok, I understand what you mean, I am talking about like the site called Myndir, before scrolling down, the menu has this brown non-translucent background, I want that also to be translucent before scrolling down.
Seems like there′s a background under the menu there (before scrolling down) that ruins the whole look.

Ok, just popped in my head, do I need to put the menu on other pages than homepage onto the header image like it is on the homepage?
Is that possible?
While keeping the header image smaller on other sites, not whole like on the homepage?

So, to explain what I mean, can I put the menu on the header image so it seems completely translucent when you first come on the page?

Just letting you know that I am looking at this, but it’s harder than I thought.

Oh, ok, thank you so much though, I really appreciate it.

I’m not sure how to achieve this on mobile, but for desktop try this:

@media screen and (min-width: 768px) {

   .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header {
        margin-bottom: 0 !important;
        padding-bottom: 77px;
    }
}

Totally worked for desktop, thank you so much for your help, much appreciated!
So happy with the look now. ??