menu fixed on top of page
Posted: Sun Mar 15, 2015 6:55 pm
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:
And a bit further in the template i did add this class to the table that contains the menu:
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:
And include a table with menu between div's like this:
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.
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);
}
Code: Select all
class="centered"
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;
}
Code: Select all
<div class="container">
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.