Hi,> > we would love to use a transparant menu bar, which is displayed over the hero section. Therefore, the hero section must start higher on page, so start at same height as the menu bar.> > We want it to be like this:> >
> > At the moment the menu bar starts higher on page, so you can’t read it. Is that possible to start it on top of hero section? Please tell me how.> > We would also like to make the navigation bar sticky and give it another colour while it’s sticky so people can read it properly. When it’s on top of page it must be transparant, while it’s sticky it must be black.> > Site: adfarm.nl. Theme is dawn.> > Please help us.> > thanks in advance.
Hey @adfarm ,
Please add this into the CSS
.header-wrapper {
position: fixed;
width: 100%;
}
.header-wrapper.active {
background-color: black;
}
There’s javascript involved, so go to you online store, and click Edit Code as shown below, (Make sure you are in your current theme)
Then look for the file named ‘theme.liquid’ and add the follow code right above the tag that says as shown in the picture below
This is the code to paste
@ThePrimeWeb @Thanks for your reaction! It works, but the sticky menu does not show at the top of the page anymore. It is black but somewhere around the middle of the page when scrolling.
You have a solution for this?
Hey @adfarm ,
Maybe you can amend the CSS to this
.header-wrapper {
position: fixed;
width: 100%;
top: 40px;
}
.header-wrapper.active {
background-color: black;
top:0;
}
Hi @ThePrimeWeb , thanks again for your support. Does not work how it supposed to be.
Can we also just fasten the menu bar on the top of the hero section, so no sticky movement at all? Please tell me how do that.
@ThePrimeWeb @Is it possible to make menu bar only transparant on homepage? Rest of pages must be in color.
And also normal height. So is it possible to use the css script only for homepage? Can we exclude other pages from this script? Please let me know. @ThePrimeWeb
Hey @adfarm ,
Ok, remove all the code that I’ve asked you to insert (Make sure you do so) and instead do this,
Go to your theme and click on the “…” button and select “Edit Code” as shown below,
Then look for “theme.liquid” in the “Layout” folder, and add the following code right after the tag that says “” (Ignore the content on the image, the actual code is below. Image just shows you the placement).
This is the code
{% if template.name == 'index' %}
{% endif %}
Works great. But has to be black on other pages then homepage. Is that possible? —> https://adfarm.nl/products/facebook-ads-tijdlijn-advertenties
So only transparant on homepage. Please tell me, then I will recommend you and mark solution.
Hey @adfarm ,
The way I see it, it’s already black on the other pages.
But if you really want to make sure then paste this code instead
{% if template.name == 'index' %}
{% else %}
{% endif %}
@ThePrimeWeb is it also possible to include the transparent menu bar on more pages. By example on contact page?
I want to be able to use the transparent everywhere where I use a hero image banner.
please tell me how to include more pages besides the index template. Thank you in advance
This should work, just keep chaining “or template ==” statements in the if statement.
{% if template.name == 'index' or template == 'page.contact' %}
{% else %}
{% endif %}
@ThePrimeWeb works for contact page, but not for other pages like —> https://adfarm.nl/pages/over-adfarm
How can I fix this page? Please help me. Then it’s finished and I will mark as solution and like.
Hey I noticed you have 3 discussions open regarding the same issue. This can be conflicting for the people answering those discussions because you are applying code from 3 seperate places and each one of us are not aware of the code you are modifying from other places which can break our code. Please open one discussion for one issue.
Thank you!