Page 1 of 1

menu fixed on top of page

Posted: Sun Mar 15, 2015 6:55 pm
by bastingse
I thought it would be nice to have a menu that stay on top of the page while you are scrolling. I did find a solution that works...... i thought...

On this website http://www.modeheerenhuys.be/ i did added this style to the template:

Code: Select all

.centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}
And a bit further in the template i did add this class to the table that contains the menu:

Code: Select all

class="centered"
It all looks well centered in Firefox but in other browers, safari and IE for example the left side of the table does start 50% from the left....

Now i'm working on a new website and wanne use this function again but now i try it with something different.
It is about this website: http://www.websitemaastricht.nl
Added this style to the template:

Code: Select all

.container { 
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 58;
	width: 100%;
	background-image: url("<?=$pth['folder']['templateimages']?>menulr.png");
	z-index: 100;
	text-align: center;
}

.container > div {
	display: inline-block;
	text-align: left;
}
And include a table with menu between div's like this:

Code: Select all

<div class="container">
Now it looks perfect in most browsers (Fire Fox, IE, Safari, Chrome), but....... when i do log in to the website, the black admin menubar from cmsimple on top is óver the menu i created for the website so i can't see it while i'm working on the website. I did solve the problem by adding a menu in the footer. But how can i solve the problem of 'not seeing the menu' i added fixed on top of the page?

Second question (still regarding this website http://www.websitemaastricht.nl )
The logo in the header is in a table cell and it is óver the fotobox plugin, but in Safari it is on the left of the page.

Re: menu fixed on top of page

Posted: Sun Mar 15, 2015 7:09 pm
by Tata
Try to make a "copy" of the template and define the admin template in which the position of the menu is not fixed but put in a simple DIV placed before any other DIV.

Re: menu fixed on top of page

Posted: Sun Mar 15, 2015 7:33 pm
by cmb
bastingse wrote:And include a table with menu between div's like this:
I don't understand, why you use a table with a single cell. If you really need any table specific behavior, you could set display:table or display:table-cell on the <div> or <ul> (that is not necessarily supported by old browsers, such as IE7 and below, but these don't correctly support position:fixed anyway)?

However, if you don't use a table or display:table, laying out a fixed container becomes easier (e.g. there's no need for a background-image).
bastingse wrote:Now it looks perfect in most browsers (Fire Fox, IE, Safari, Chrome), but....... when i do log in to the website, the black admin menubar from cmsimple on top is óver the menu i created for the website so i can't see it while i'm working on the website. I did solve the problem by adding a menu in the footer. But how can i solve the problem of 'not seeing the menu' i added fixed on top of the page?
The simplest solution might be to configure the adminmenu to be scrollable (Settings -> CMS -> Editmenu -> Scroll).
bastingse wrote:It is about this website: http://www.websitemaastricht.nl
There seems to be something wrong with this website (maybe only a temporary problem?). My first attempt to access it took minutes, and the second attempt is loading for over 5 minutes (still unfinished, and there are several failures related to www-embed-player.js).

Re: menu fixed on top of page

Posted: Wed Mar 18, 2015 4:07 pm
by bastingse
Tata wrote:Try to make a "copy" of the template and define the admin template in which the position of the menu is not fixed but put in a simple DIV placed before any other DIV.
I'm not sure if i understand what you are trying to say (sorry my englisch isn't very well)

Re: menu fixed on top of page

Posted: Wed Mar 18, 2015 4:12 pm
by bastingse
cmb wrote: The simplest solution might be to configure the adminmenu to be scrollable (Settings -> CMS -> Editmenu -> Scroll).
If i change that function, then the admin bar isn't visible anymore.
cmb wrote: There seems to be something wrong with this website (maybe only a temporary problem?). My first attempt to access it took minutes, and the second attempt is loading for over 5 minutes (still unfinished, and there are several failures related to www-embed-player.js).
Indeed it was down then, Ddos attack :-)

Re: menu fixed on top of page

Posted: Wed Mar 18, 2015 4:14 pm
by cmb
bastingse wrote:
Tata wrote:Try to make a "copy" of the template and define the admin template in which the position of the menu is not fixed but put in a simple DIV placed before any other DIV.
I'm not sure if i understand what you are trying to say (sorry my englisch isn't very well)
Tata basically suggests that you use a different template for admin mode, which doesn't have a fixed menu on top of the browser window. You could use hi_Admin to configure CMSimple_XH to use this other template in admin mode only.

PS:
bastingse wrote:Indeed it was down then, Ddos attack :-)
Ah, that explains the problems I had.

Re: menu fixed on top of page

Posted: Wed Mar 18, 2015 4:28 pm
by bastingse
Thanks Tata and cmb for your help. I never knew abou that plugin. I just did try it and it works perfect (thanks Holger)!! Just what i need !