Text of nav bar is mixing with test page

[helmaT]

Hi,

Happy NY!
A new year, an new question …

I have made the backgrounds and navbar in the website I’m working on in Icon stack transparent, but when scrolling down on the pages, the text / headings of the nav bar are still visible on top and mixing with the content/text of the rest of the page underneath it. Ik would like a way to solve that or make it look less confusing. Maybe the most simple way is that one wouldn’t see the navbar when scrolling down on the page? Maybe you know a better solution. Really like to hear from you!
Best regards, H

[basanta]

HI @helmaT,

Thanks for writing in!
Happy New Year to you too!

The best way to do is to add a background when the menu is sticky. Please add this CSS to your theme option -> CSS and let us know if that works for you.

.x-navbar.x-navbar-fixed-top.x-container.max.width {
    width: 100% !important;
    max-width: 100% !important;
    background: url(//leveninnu.nl/wp-content/uploads/2018/12/kiki_canvas_light2-e1544184117613.jpg);
}

Hope this helps!

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[helmaT]

Thanks so much Basanta! It works like a charm!
Will check the tutoraial.
Have a brilliant year, H

[rad]

You’re most welcome!