I have been trying to work in a fixed menu as seen on http://www.responsivegridsystem.com/ into my new layout, but I am running into some issues with it.
First and foremost, it overlays part of the header. The start position needs to be where the header is below the menu. Adding a margin to the header element pushes everything down, including the menu.
I have also tried to center the menu, but it seems to be slightly offset.
Finally, the background for the menu bar should stretch the whole way.
Is your menu part of your header element? Make it a separate element (Iām assuming you are using position:fixed on the menu) and try putting a padding-top equal in size to the menu bar on the header.
If you give the menu a container that has width 100%, this container will stretch the whole way across the screen (I gather that is what you meant), and give this container a background.
It is a separate element using position:fixed, whereas the rest of the page is in a wrapper using position:relative. That is what I saw on the page where I got the idea from. I donāt actually have a height defined for the menu bar, but will try adding one and defining a padding on the header. Or maybe the wrapper, hrmā¦
Will try a container around the menu too.
Thanks!
You really shouldnāt use fixed heights using pixels for elements if the site is to be responsive. Maybe one of the CSS experts can provide a suggestion for that.
Please supply the script which is not working.
I use the technique of a fixed-menu for responsive pages and it works well thanks to @PaulOB
It is worth noting that the fixed-menu is removed from the normal page flow. Following elements (DIVS, Ps, H1, H2, etc) will start at the top of the page and overwrite the fixed-menu. To ensure there is no block overwriting specify a min-height: MAGIC-NUMBERem; and margin-top: MAGIC-NUMBERem; for the first following block element.
<body>
<div id="fixed-menu">
...
</div>
<div id="content">
...
</div>
...
...
CSS
#fixed-menu { min-height: MAGIC-NUMBERem;}
#content {margin-top: MAGIC-NUMBERem; }
The height of MAGIC-NUMBER will depend upon the fix-menu contents.
Thereās no script in use related to the menu, its just css at the moment.
The min-height and margin-top works fine, though after adding the navigation I now seem to have ended up with a slightly too wide page ā it scrolls a bit sideways. I am not quite sure what I could have done to cause that, though.
Please supply the script which is not working.
I am sorry, I do not understand what you mean by script in this context?
Here is a sample script template:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title> HTML5 Template </title>
<style type="text/css">
.bgs {background-color:snow;}
.mga {margin:auto;}
.tac {text-align: center}
.vam {vertical-align: middle;}
</style>
</head>
<body class="bgs">
<div id="topMenu">
topMenu goes here
</div>
<h1> HTML5 Template </h1>
<div class="tac mga bge">
Blurb goes here
</div>
</body>
</html>
The script should start and finish with three back-ticks on their own line.
I am not sure we are talking about the same thingsā¦ But the page is at http://www.westeros.org/Test if that helps.
The link is incorrect because it requires a .html extension.
For the benefit of others, please edit your post and amend the link.
No, it does not, its generated by a CMS. It is not a static .html page.
It took such a long time to load I thought the link was incorrect. Adding the .html extension opened a pageā¦
That seems to be because of the sidebar headings.
Remove the negative margin-right and the width:100% from div.SidebarHeader.
Ah, thank you! That was still there from the older design, but didnāt cause an issue until I changed around the body margins to work with the navigation.
To collapse this menu into one of those drop downs indicated by three lines on top of each other (no idea what that one is called!), would it take javascript or can that be done with just css? Iāve got the rest of the design collapsing into a single column at 480 screen width, I believe.
You can collapse the menu to an icon through css and media queries but you would need javascript to open it upon request. You can use the ācheckbox hackā to open the menu without js but some older mobiles donāt like it which seems to defeat the purpose a little as it is a specifically mobile action that you want.
You could just replace the :checked part in the demo with a script that adds or removes a class on click instead.
That icon is often called a āHamburgerā.
You would typically use media queries to hide the menu and display the hamburger.
To toggle the display of the menu on and off, itās typical to use js
http://htmldog.com/examples/showhide1/
though it can be done with css only
http://htmldog.com/examples/showhide2/
Thank you both, will have a look at some āhamburgerā examples.
Is it better to have the font size for the menu set as a percentage or as ems, to scale down well on smaller screens? Still wrapping my head around how to design responsively, since the old design was all fixed size.
You should be using em, rem or % (any relative unit) for font sizes throughout the site for accessibility.
Itās generally not good the reduce fonts on a small screen, as they can become hard to read. Only reduce them if they donāt fit on screen, or were big in the first place (if you must).
I have the fixed top menu working as I want in its current state, but it is looking like I will need to extend the functionality to also allow for drop-downs for some menu items. I am uncertain about how to combine a drop-down with the fixed menu; while I have code for a menu with a drop-down, it is for a non-fixed menu and there are elements that conflict.
Would it be possible to also have several separate menus within the nav, so that I could do one to the left, one centered and one to the right?