Make the menu sticky to top
Posted
#4382
(In Topic #881)
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?
Moderator
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.
Posted
Moderator
You should use overrides. I just tested editing the original files as I wanted to do a proof of concept very quickly.
Posted
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?
Moderator
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.
Posted
Joey Antonis said
А можно посмотреть как это теперь выглядит? Думаю, что как было мы увидим на своих сайтах? Для просмотра через гаджет?
Posted
Posted
Joey said
Hmm…
That is a Wordpress site. Did you switch away from composr?
Keith Parker said
Joey said
Hmm…
That is a Wordpress site. Did you switch away from composr?
From “Post #5256”, 27th Feb 2019
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.
Posted
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 #5262”, 1st Mar 2019
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.
Posted
Keith Parker said
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 #5262”, 1st Mar 2019
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 #5264”, 1st Mar 2019
Keith,
look here. DOENWENU.NL
Sorry for my late reaction
Posted
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.
Posted
Joey said
<br />
i would like to have my menu always on top (not on mobile)<br />
From “Composr upgrade request”, 2nd Sep 2018
Did you check?
It seems your menu is sticky on mobile too.
Posted
enelson said
Joey said
<br />
i would like to have my menu always on top (not on mobile)<br />
From “Composr upgrade request”, 2nd Sep 2018
Did you check?
It seems your menu is sticky on mobile too.
From “Post #5316”, 31st Mar 2019
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 recently viewed this.
