Centering navigation menu - css

Have been trying to sort out a centering of the navigation bar, just above the banner (link). Ran through a few solutions on here, and I have played around with custom CSS to try certain variations, but still cant get what i am after. Put simply, i am just wanting to get the menu centered. I have read that it had to be fixed width, but then heard otherwise. Hopefully the solution is something i can get my head around.
Thanks

You need to remove some of css rules from your style sheet and add few - see below css to get desired layout.
CSS:
#header #navigation {
/*float: left;*/ /* remove this property*/
}
#header #navigation {
background: none repeat scroll 0 center transparent;
box-shadow: none;
clear: none;
/*float: right;*/ /* remove this property*/
/*width: auto;*/ /* remove this property*/
width: 285px; /* add width here to get the actual width of menu so we can make it center*/
}
See screen shot:

Related

How to get a scrollable left-hand-side menu in this Wordpress theme

I am trying to modify the CSS code for the underlying Worpress theme for this site: https://isspm2021.webs.upv.es/. The theme is this one: https://wordpress.org/themes/escapade/.
What I am trying to do is get a vertically scrollable left menu when the screen size is, say, 1024 × 768.
This is what I get now:
As you can see, the last items of the left menu remain hidden and inaccessible, depending on the screen size. I would like the left-hand-side menu to be vertically scrollable when needed.
I've tried several CSS instructions, like overflow:scroll, without success.
I think it is because of the theme itself; more precisely, because of the way the different div elements are defined to be placed regarding others (position:relative and so on).
Any hint of how to modify the CSS style of this theme to get what I need?
I would suggest these for the menu to be scrollable:
Set a height for the menu part,
Set Overflow-y:auto;
Here's the solution:
.main-navigation-container, .main-navigation.open, .main-navigation ul ul, .main-navigation .sub-menu {
background-color: #f5f5f5;
overflow-y: auto;
height: 400px;
}
Also, If you want the scroll to appear when the browser size is less than 1024px, put the code below:
#media all and (max-width:1024px){
.main-navigation-container, .main-navigation.open, .main-navigation ul ul, .main-navigation .sub-menu {
background-color: #f5f5f5;
overflow-y: auto;
height: 400px;
}
}
The above are two options.Please don't insert both of them.Only use one at a time to see the changes.
If you can accept the full left navbar scrollable, you may add overflow: auto property in .side-masthead:
.side-masthead {
background-color: #f5f5f5;
overflow: auto; /* Add overflow property */
}

How to make logo not to have hover in menu?

I downloaded a CSS Menu from here and trying to make some changes, here is fiddle file jsfiddle and the full screen result.
Now I trying to do 2 things:
Make Logo text/image not to have hover
Fix the width, I put 100% but if you look at full screen result you will notice what is wrong
Change line 42 to: #navbar li:not(:first-child):hover {
This will make sure the hover effect is not applied to the first <li> which in your case contains the logo. jsFiddle
This is called CSS Selectors Level 3
To fix your nav position use:
#nav {
width: 100%;
position: fixed;
margin: 0 auto;
left: 0px;
}
EDIT: if you still want the little margin on each side use:
#nav {
position: fixed;
margin: 0;
left: 1%; /* you can change this to whatever margin you like */
right: 1%;
}
and add:
#navbar {
width: auto;
}
Try #navbar>li:first-child~li:hover. I updated your fiddle at
http://jsfiddle.net/PHPglue/h4uL6/7/
If you do need a fixed position for some reason, wrap the entire code in a <div>, position:absolute; it and give it the same width and margins as I gave #nav to this <div> then make #nav's position:fixed;.

Change menu bar width

I'm trying to center the menu bar and make the menu bar fit the text.
Here is a website I'm trying to edit:
http://www.graffitisumperk.g6.cz/blog/
I've already figure out that I can center menu items this way:
.menu {
text-align:center
}
.menu li {
display:inline-block;
float:none;
margin-left: -5px;
}
.menu li li {
display:block;
text-align:left
}
But I can't seem to fit the menu bar to the width of the menu items.
I've calculated it should be 445px long, but when I change this:
#container {
margin: 0 auto;
max-width: 960px;
to 445px, the whole page it affected, not just the menu bar.
Any ideas how to fix it?
You can do it very very similarly :). One of the effects of display: inline-block; is that the element attempts to resize itself to contain its children. You could achieve this with float or position: absolute as well, but those do not really fit into this layout.
.main-nav { text-align: center; }
.menu { display: inline-block; }
I guessed you might want to center the menu, so I added the text-align too.
Tip: If you use the inspector of your browser (all modern browsers have a pretty decent one), you can easily figure out which element you need to change.
When I looked at your page, it looks like the part you really need to change is the "main-nav" class.
The #container div contains your whole page so you don't want to mess with that one.

CSS: table and table-cell replacement for IE7

http://jsfiddle.net/vByVD/9/
This what i have. The menu looks right is horisontal in most browsers. But in IE7 and lower ofcourse it is something else, it is vertical there.
I found out this is because they dont support table, table-cell.
I tried some hacks as you can see in the first lines in the CSS, but it does not quite work, this do only show 3 li horisontal and then it makes new line and show the other li's.
I want it to appear as the other new browsers, so its one line horisontal.
How can i make this work?
There are two ways to accomplish this. The first:
#header-nav{
overflow: hidden;
zoom: 1; /* IE6 and below work around */
}
#header-nav li{
float: left;
margin: 0;
padding: 0;
}
#header-nav li a{
display: block; /* if you want height and width */
}
The second:
#header-nav li{
margin: 0;
padding: 0;
display: inline;
}
Personally I use the first of the two as it provides a bit more control for styling a block for color, width, height, margin, padding, etc. Plus, when you do a:hover the entire box is a link; not just the text. My recommendation is to not use tables. The results are unpredictable as you have seen. Not to mention, now its easier to add sub-menu's, using JQuery or CSS.

float: left; Not working in IE?

(I'm looking at this site in IE 8.) As you can see the content floats center knocking the sidebar below it. It works perfectly in Chrome. I can't think why the float:left; command isn't working in IE.
#content {
margin: 5px 0 5px 5px;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
width:65%;
float:left;
}
Thanks for your help.
Tara
If you add overflow: hidden to your ul#list-nav then that will prevent the floating navigation messing up the rest of the document.
As for why the navigation is displaying strangely, it's because you're specifying your widths and layout badly. What you should be using is this:
ul#list-nav {
overflow: hidden;
}
ul#list-nav li {
width: 16.66%;
float: left;
display: block;
margin: 0;
padding: 0;
}
ul#list-nav li a{
display: block;
margin-left: 1px;text-decoration: none;
padding: 5px 0;
background: #754C78;
color: #EEE;
text-align: center;
}
That way, the width of each element is exactly 16.66%, rather than 16.62% + 1px
what i currently see in IE8 is:
the problem is that menu links are too wide in IE. You've set the width to 16.62% to each anchor in the menu and that's too wide for IE. Since the width of your content is fixed I suggest you set fixed width in pixels (132px) for these links so they fit on one line and look consistent across browsers, also removing li style setting margin: 0.5em 2em to fix positioning problem in IE.
After my fix I see this:
To me it looks like theres nothing really wrong with the content.
In ie6-ie9 the menu seems to be failing in some way.
and also the menu goes in two rows which pushes everything down. I'm not sure if that is all due to the s letter or not at this point..
Note that the extra letter s seems to be somewhere between #menu and #content .containers.
Edit2: the problem is clearly the menu a width which is too much and the menu goes into two rows.
The way menu is often done is that the ulor outer div holds the color and then the menu li are either centered within that or just plain floated to the left. this way you get the full height feel without the tourbles of the menu braking like this ( though if you do it without ignoring the width.. it is possible with too many menu items and so on. )
add clear:both; on menu container.
note: is broken in Firefox to

Resources