Highlighted

Solution: Fixed nav bar in responsive site without scroll effects

Community Beginner ,
Aug 10, 2017

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

Do you talk about this: navbar-noscroll​ ?

Or did I miss something?

Best Regards,

Uwe

Views

275

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Solution: Fixed nav bar in responsive site without scroll effects

Community Beginner ,
Aug 10, 2017

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

Do you talk about this: navbar-noscroll​ ?

Or did I miss something?

Best Regards,

Uwe

Views

276

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 10, 2017 0
Adobe Community Professional ,
Aug 10, 2017

Copy link to clipboard

Copied

Do you talk about this: navbar-noscroll​ ?

Or did I miss something?

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 10, 2017 0
Community Beginner ,
Aug 11, 2017

Copy link to clipboard

Copied

Yes I do mean that.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 11, 2017 0