Make the menu sticky to top

Post

Posted
Rating:
#4611 (In Topic #982)
Avatar
Standard member
Joey is in the usergroup ‘Honoured member’
Hi Everyone :)

i would like to have my menu always on top (not on mobile)
i try some code from internet but nothing works …

Is there any solution to fix this? SO when people scroll down that main menu is always on top?
Online now: No Back to the top

Post

Posted
Rating:
Item has a rating of 5 (Liked by Joey)
#4612
Avatar
Site director
Chris Graham is in the usergroup ‘Administrators’
You may be able to use position: sticky nowadays.

Can I use... Support tables for HTML5, CSS3, etc

I got it to work, here's a diff.

Code (Diff)

diff --git a/themes/default/css/global.css b/themes/default/css/global.css
index eb31f7e88..d898a6806 100644
--- a/themes/default/css/global.css
+++ b/themes/default/css/global.css
@@ -557,6 +557,9 @@ header h1 {
                position: relative;
        /*{+END}*/
        min-height: 3.4em;
+       position: sticky;
+       top: 0;
+       z-index: 1000;
 }
 
 .global_navigation_inner {
@@ -564,6 +567,7 @@ header h1 {
        /*{+START,IF,{$MOBILE}}*/
                margin-left: 8em !important; /* Space for the menu button, which is position:absolute */
        /*{+END}*/
+       position: relative;
 }
 
 .global_navigation .top_buttons, .global_navigation .top_form {
diff --git a/themes/default/javascript/menu_popup.js b/themes/default/javascript/menu_popup.js
index 592fa06b8..defbab306 100644
--- a/themes/default/javascript/menu_popup.js
+++ b/themes/default/javascript/menu_popup.js
@@ -113,6 +113,8 @@ function pop_up_menu(id,place,menu,event,outside_fixed_width)
                l+=e.parentNode.offsetWidth;
        }
 
+       t=45;
+
        var full_height=get_window_scroll_height(); // Has to be got before e is visible, else results skewed
        e.style.position='absolute';
        e.style.left='0'; // Setting this lets the browser calculate a more appropriate (larger) width, before we set the correct left for that width will fit
diff --git a/themes/default/templates/GLOBAL_HTML_WRAP.tpl b/themes/default/templates/GLOBAL_HTML_WRAP.tpl
index 0130c31b1..94c9c94da 100644
--- a/themes/default/templates/GLOBAL_HTML_WRAP.tpl
+++ b/themes/default/templates/GLOBAL_HTML_WRAP.tpl
@@ -29,6 +29,7 @@ Powered by {$BRAND_NAME*} version {$VERSION_NUMBER*}, (c) ocProducts Ltd
 
                                {$,The main logo}
                                <h1 class="logo_outer"><a target="_self" href="{$PAGE_LINK*,:}" rel="home"><img class="logo" src="{$?*,{$MOBILE},{$IMG,logo/standalone_logo},{$LOGO_URL}}"{+START,IF,{$NOT,{$MOBILE}}} width="{$IMG_WIDTH*,{$LOGO_URL},1}" height="{$IMG_HEIGHT*,{$LOGO_URL},1}"{+END} title="{!HOME}" alt="{$SITE_NAME*}" /></a></h1>
+                       </header>
 
                                {$,Main menu}
                                <div class="global_navigation">
@@ -58,7 +59,6 @@ Powered by {$BRAND_NAME*} version {$VERSION_NUMBER*}, (c) ocProducts Ltd
                                                {+END}{+END}
                                        </div>
                                </div>
-                       </header>
                {+END}
 
                {+START,IF,{$NOT,{$MOBILE}}}
 

The first styles (the actual sticky declaration etc) are on the .global_navigation selector.
I'm not sure why the GLOBAL_HTML_WRAP.tpl change was needed, but it was. I had to take the nav bar outside the header.


Become a fan of Composr on Facebook or add me as a friend. Add me on on Twitter. Follow me on Minds (where I am most active). Support me on Patreon

Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Online now: No Back to the top

Post

Posted
Rating:
#4613
Avatar
Site director
Chris Graham is in the usergroup ‘Administrators’
A bit more info. I had to edit the JS file, as now the offset of the dropdown menu is relative, not absolute. So I hard-coded a position of 45 pixels from the top of the nav bar. Now I think about it I probably broke multi-level dropdowns and it will need to have some more work.

You should use overrides. I just tested editing the original files as I wanted to do a proof of concept very quickly.


Become a fan of Composr on Facebook or add me as a friend. Add me on on Twitter. Follow me on Minds (where I am most active). Support me on Patreon

Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Online now: No Back to the top

Post

Posted
Rating:
#4614
Avatar
Standard member
Joey is in the usergroup ‘Honoured member’
Thanks Chris for your time ands solution.

My skills are realy basic, so i dont know where to put this code.
Can you help me, to tell in what file i have to put this code?
Online now: No Back to the top

Post

Posted
Rating:
Item has a rating of 5 (Liked by Joey)
#4642
Avatar
Site director
Chris Graham is in the usergroup ‘Administrators’
Attachment

sticky-menu.tar



Here's some direct edits on top of the default theme.

To see exactly what I used use a diff tool like DiffMerge to compare my overridden ones against the default ones.

 


Become a fan of Composr on Facebook or add me as a friend. Add me on on Twitter. Follow me on Minds (where I am most active). Support me on Patreon

Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Online now: No Back to the top

Post

Posted
Rating:
#4643
Avatar
Standard member
Joey is in the usergroup ‘Honoured member’
WoW thanks CHriss!
It works realy nice.
Online now: No Back to the top

Post

Posted
Rating:
#4663
Avatar
Standard member
ХорошаЯ is in the usergroup ‘Well-settled’

Joey Antonis said

WoW thanks CHriss!
It works realy nice.

А можно посмотреть как это теперь выглядит? Думаю, что как было мы увидим на своих сайтах? Для просмотра через гаджет?

Joey Antonis said

WoW thanks CHriss!
It works realy nice.

And you can see how it looks now? I think that as it was we will see on their sites? To view through the gadget?

Я самая красивая из стаи синих птиц.
Online now: No Back to the top

Post

Posted
Rating:
#4677
Avatar
Standard member
Joey is in the usergroup ‘Honoured member’
Hi

i dont know what you mean.
You like to see a demo with this menu?
Online now: No Back to the top

Post

Posted
Rating:
#4678
Avatar
Standard member
ХорошаЯ is in the usergroup ‘Well-settled’
Yes)

Я самая красивая из стаи синих птиц.
Online now: No Back to the top

Post

Posted
Rating:
#4681
Avatar
Standard member
Joey is in the usergroup ‘Honoured member’
Ah ok, please look here. Welcome to Doenwenu.nl - Doenwenu.nl
That is my site.
Online now: No Back to the top
1 guest and 0 members have just viewed this.

Statistics

Users online:

Manu, 192 guests

Usergroups: 

Forum statistics:
  • 932 topics, 4,477 posts, 5,422 members
  • Our newest member is Sarawilliams7
Birthdays:
Back to Top