Highlighted

Sticky header with responsive design?

Community Beginner ,
Feb 28, 2018

Copy link to clipboard

Copied

I am designing my first responsive website. So far I have images that stretch to the width of the browser and I've got different layouts for different break points. Yay! But I also want to have a sticky header (I want the navigation bar and logo to stay visible while scrolling). I've read the forums and  now I'm confused. A lot of the entries are really old and I'm not sure if the answers are still correct. I think you need to use scroll effects to create a sticky header and scroll effects don't work in a variable width site. However pinning seems to affect this (but not in the way I would like). I had to pin my navigation bar to the right for it to stretch to the right when you enlarge the browser. This made the navigation bar stop scrolling and show up behind my other items lower on the page. It's almost what I want but sadly it is behind my other items. I've watched videos on pinning and this isn't behaving how I would expect. My nav bar is on the master page and it shows up behind things that are on the other pages so I don't see how layering could be the problem. So my question is, can I really not have a sticky header and also a variable width structure to my website? It seems like a really common thing for people to want. Here is a screen shot of my header and then the page when you scroll.

Screen Shot 2018-02-28 at 7.50.39 PM.png

scrolling down...

Screen Shot 2018-02-28 at 7.50.23 PM.png

Views

1.1K

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

Sticky header with responsive design?

Community Beginner ,
Feb 28, 2018

Copy link to clipboard

Copied

I am designing my first responsive website. So far I have images that stretch to the width of the browser and I've got different layouts for different break points. Yay! But I also want to have a sticky header (I want the navigation bar and logo to stay visible while scrolling). I've read the forums and  now I'm confused. A lot of the entries are really old and I'm not sure if the answers are still correct. I think you need to use scroll effects to create a sticky header and scroll effects don't work in a variable width site. However pinning seems to affect this (but not in the way I would like). I had to pin my navigation bar to the right for it to stretch to the right when you enlarge the browser. This made the navigation bar stop scrolling and show up behind my other items lower on the page. It's almost what I want but sadly it is behind my other items. I've watched videos on pinning and this isn't behaving how I would expect. My nav bar is on the master page and it shows up behind things that are on the other pages so I don't see how layering could be the problem. So my question is, can I really not have a sticky header and also a variable width structure to my website? It seems like a really common thing for people to want. Here is a screen shot of my header and then the page when you scroll.

Screen Shot 2018-02-28 at 7.50.39 PM.png

scrolling down...

Screen Shot 2018-02-28 at 7.50.23 PM.png

Views

1.1K

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
Feb 28, 2018 0
Adobe Community Professional ,
Feb 28, 2018

Copy link to clipboard

Copied

Most important for sticky header: place your header elements on your master in a/the top layer.

Pin your stuff as needed, but all to the top of course (left-center-right).

On your pages don´t place any elements that should be below/under/behind the header into this layer.

Layers work site wide and not only page wide.

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...
Feb 28, 2018 1
Community Beginner ,
Mar 02, 2018

Copy link to clipboard

Copied

Thank you very much. Such a beginner mistake, I thought the master page would automatically be on top.

Sabrina

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...
Mar 02, 2018 0
LEGEND ,
Mar 02, 2018

Copy link to clipboard

Copied

sabby  schrieb

Thank you very much. Such a beginner mistake, I thought the master page would automatically be on top.

Sabrina

Interesting: In print design, everybody expects the master page elements are in the background, in web design many users assume, that master page elements are on top.

Both isn‘t viable for Muse. As already stated, master pages are working site-wide, and this has to work this way.

You must be able to place elements in the background of every page, and you must be able to place elements in front of all layout page elements, like menus.

In Muse master page elements can be placed before/behind every other layout page element. It is only a matter of layering.

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...
Mar 02, 2018 0
Adobe Community Professional ,
Mar 02, 2018

Copy link to clipboard

Copied

Beginners are highly welcome here .

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...
Mar 02, 2018 0