Header sticky

[SoloInter]

I think it will be better to have the header bar (menu, notifications) in a sticky header.

Like that we don't have to scroll scroll scroll to the top to go to our notification or menu. Mobile need that more than desktop.

[MMXII]

We are talking about the default theme, right? Yes, I have to agree on this one (even more so, since there is no go-to-top button by default). I highly doubt though that we will see a major overhaul of the default theme and/or theme functionality in IPS 4.

[SoloInter]

Yes default theme or all theme based on this one.

They should do something like "annoucement" that we can have on top on all pages and when we scroll annoucement stay on the top of the screen.

Edited November 8, 2018 by Archimed

[mark007]

Yes, this would be great and very helpful

[SoloInter]

I added that on our website : https://www.internazionale.fr/

 

[aia]

I'd rather suggest to dock it to the bottom of the screen on mobile, as many mobile apps does.

Here is an example how i implemented this on one of my websites a while ago.

This way you can access breadcrumb button, quick links and notifications right under your finger even while holding a big mobile with one hand.

[kmk]

1 hour ago, Mr 13 said:

I'd rather suggest to dock it to the bottom of the screen on mobile, as many mobile apps does.

Here is an example how i implemented this on one of my websites a while ago.

This way you can access breadcrumb button, quick links and notifications right under your finger even while holding a big mobile with one hand.

Can you shared the steps to achieve that? 

Is possible make it like Chrome browser, when you take action scrolling down is when appear the menu header? So it will be disappeared in others time for reading content. 

[SoloInter]

Nice one @Mr 13 I will do that, you right it's better.

[SoloInter]

It's done ^^

[kmk]

3 hours ago, Archimed said:

It's done ^^

Is something so hard? Can I ask for how to achieve? 

[aia]

4 hours ago, kmk said:

Can you shared the steps to achieve that? 

23 minutes ago, kmk said:

Is something so hard? Can I ask for how to achieve? 

Here is an example (add it to custom.css file of your theme):

/*** Attach Mobile Nav to Bottom ***/
#elMobileNav {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 5049;
  border-top: 1px solid #808080;
}
/* Increase body length in order to not overlap footer elements */
body.ipsApp_front {
  padding-bottom: 50px;
}
/* Prevent from overlapping by lang switcher */
ul#elNavLang_menu, ul#elNavTheme_menu {
  z-index: 5048 !important;
}
/* Prevent from overlapping by notification popups */
#elFlashMessage.ipsFlashMsg_bottom {
  bottom:50px;
}
#elFlashMessage.ipsFlashMsg_dismissable [data-action='dismissFlashMessage'] {
  right: 10px;
}

It may also require some additional cosmetic tuning for your theme.

4 hours ago, kmk said:

Is possible make it like Chrome browser, when you take action scrolling down is when appear the menu header? So it will be disappeared in others time for reading content. 

It shouldn't be hard but i don't plan to implement this because in my experience this behaviour could be unobvious and annoying for inexperienced users.

Fixed docking is enough in my opinion.

Edited December 16, 2018 by Mr 13

[mark007]

On 12/16/2018 at 4:12 PM, Mr 13 said:

Here is an example (add it to custom.css file of your theme):

very helpful !!!

Can you tell, how to set the nav bar at the top of the page?

[Daniel Ocio]

On 12/16/2018 at 4:12 PM, Mr 13 said:

Here is an example (add it to custom.css file of your theme):

/*** Attach Mobile Nav to Bottom ***/
#elMobileNav {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 5049;
  border-top: 1px solid #808080;
}
/* Increase body length in order to not overlap footer elements */
body.ipsApp_front {
  padding-bottom: 50px;
}
/* Prevent from overlapping by lang switcher */
ul#elNavLang_menu, ul#elNavTheme_menu {
  z-index: 5048 !important;
}
/* Prevent from overlapping by notification popups */
#elFlashMessage.ipsFlashMsg_bottom {
  bottom:50px;
}
#elFlashMessage.ipsFlashMsg_dismissable [data-action='dismissFlashMessage'] {
  right: 10px;
}

It may also require some additional cosmetic tuning for your theme.

It shouldn't be hard but i don't plan to implement this because in my experience this behaviour could be unobvious and annoying for inexperienced users.

Fixed docking is enough in my opinion.

Thanks for this!
2 thigs:
1- ¿How about put stick menú in PC?

2-About mobile, i see that this dont do in the homepage, can you help doing there too?