Make the menu sticky to top
Standard 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?
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?
Site director
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.
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.
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}}}
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 Mastodon. Follow me on Minds (where I am most active). Support me on Patreon
- 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.
Site director
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.
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 Mastodon. Follow me on Minds (where I am most active). Support me on Patreon
- 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.
Standard 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?
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?
Site director
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 Mastodon. Follow me on Minds (where I am most active). Support me on Patreon
- 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.
Standard member
WoW thanks CHriss!
It works realy nice.
It works realy nice.
Standard member
Joey Antonis said
А можно посмотреть как это теперь выглядит? Думаю, что как было мы увидим на своих сайтах? Для просмотра через гаджет?
Я самая красивая из стаи синих птиц.
Standard member
Hi
i dont know what you mean.
You like to see a demo with this menu?
i dont know what you mean.
You like to see a demo with this menu?
Standard member
Yes)
Я самая красивая из стаи синих птиц.
Standard member
Ah ok, please look here. DOENWENU.NL -
That is my site.
That is my site.
Standard member
Joey said
Hmm…
That is a Wordpress site. Did you switch away from composr?
Standard member
Keith Parker said
Hmm…
That is a Wordpress site. Did you switch away from composr?
From “Post #5,256”, 12th November 2018, 12:04 am
Hi Keith,
on that domain i use a Wordpress CMS
the one i use befoure (Compo.sr) i moved to a live location.
This domein i always use to test/play with some websites. When they finish, i move it to a live location.
Standard member
Joey said
Hi Keith,
on that domain i use a Wordpress CMS
the one i use befoure (Compo.sr) i moved to a live location.
This domein i always use to test/play with some websites. When they finish, i move it to a live location.
From “Post #5,262”, 12th November 2018, 2:51 pm
Ok, I do a similar thing.
Apparently I missed your Composr menu demo where it sticks at the top when the page is scrolled down. Does it still exist somewhere? I was hoping to see it in action.
Standard member
Keith Parker said
Ok, I do a similar thing.
Apparently I missed your Composr menu demo where it sticks at the top when the page is scrolled down. Does it still exist somewhere? I was hoping to see it in action.
From “Post #5,264”, 12th November 2018, 6:45 pm
Keith,
look here. DOENWENU.NL -
Sorry for my late reaction
Standard member
I'm surprised you got position:sticky to work. I remember trying it on my site but it didn't seem to play nicely with overflow rules (which Composr has a lot of).
For example, if you have an element with overflow:hidden, the sticky function didn't go past that point (if I remember correctly). I do remember doing some research on it, and it was said that only parent elements of the nav could not have an overflow property, but this didn't seem to be the case for me because the nav would stop being sticky if it hit an element towards the footer that had an overflow property on it.
For example, if you have an element with overflow:hidden, the sticky function didn't go past that point (if I remember correctly). I do remember doing some research on it, and it was said that only parent elements of the nav could not have an overflow property, but this didn't seem to be the case for me because the nav would stop being sticky if it hit an element towards the footer that had an overflow property on it.
Site staff
Joey said
<br />
i would like to have my menu always on top (not on mobile)<br />
From “Make the menu sticky to top”, 29th June 2018, 9:07 pm
Did you check?
It seems your menu is sticky on mobile too.
Standard member
enelson said
Did you check?
It seems your menu is sticky on mobile too.
From “Post #5,316”, 22nd November 2018, 6:22 am
I know, because i had some problems with some ads.
Now its fixed and its not a problem anymore.
1 guest and 0 members have just viewed this.