Solution: Fixed nav bar in responsive site without scroll effects

[knibbelknabbelknuistje]

At first, after searching on the net for a solution to fix a nav bar on top of my page where text and artwork was going underneath with scrolling, I concluded that it could only be done with a fixed breakpoint and with the use of scroll effects. That was not what I wanted. So I started trying to do something else. In stead of using the horizontal menu widget I made buttons. I placed them on top of my template page in the header area.

The background of the buttons I made transparent and fixed them to the top left of the page. First I tried to add a rectangled box with a solid color. In this case white. Then I placed it under the buttons. What is does is that you can give the box a responsive width and height. The width is ok, but the height isn't in a responsive website. This was not the way to go.

Then I copied a button and deleted the content (the text frame) in it and gave it a white background. I placed the box on the top right side of my template page on the right side of the last button and just as heigh as the total heights of the nav bar/header area. I streched this small box/frame to the left and right side of my site and exactly inside the headers last breakpoints at 1200px. The box that was originally a button was fixed to the top of the page. The real beauty was the fact that I was only able to give this box a responsive width! That did the trick.

Opening the page in the browser, I discovered that the nav bar was only resizable in width. Because I fixed the buttons to the top left, the nav bar was only responsive to the right. But I think that playing with the different options will give other results. I left the text inside the button untouched.

In the end I had a fixed nav bar within a responsive website without the use of scroll effects.

[fotoroeder · Accepted solution]

Do you talk about this: navbar-noscroll​ ?

Or did I miss something?

Best Regards,

Uwe

[knibbelknabbelknuistje]

Yes I do mean that.