Jump to content

Header sticky


SoloInter
 Share

Recommended Posts

  • 1 month later...
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.

image.thumb.png.cbc525c410bd106390ebe38acf55b10f.png

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. 

Link to comment
Share on other sites

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 by Mr 13
Link to comment
Share on other sites

  • 4 weeks later...
  • 1 year later...
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?

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...