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.
Related
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 */
}
I have a site that I am working on.. and would like to know how to span the menu items evenly across the menu bar.
I know how to do it technically, but I want to make sure it's correct.
I want to be able to add another menu item and still have it look normal or overflow properly, etc.
The site is http://phillysuburbanhomes.com
Okay, so I added
.wpsight-menu li {
width:14%;
text-align:center
}
(more menu items were added)
My issue now is, that the full menu item doesn't show now
http://phillysubrubanhome.com - you can see what it's doing live
Currently there are 5 menu items, im assuming you would be adding another menu item thus making it 6 menu items.
The width of the container is 980px. Divide it in 6 parts which comes to 163.33. We need to give the width in percentage i.e 16.66%.
Set the width for each li as 16.66% and center-align the text.
Your css would be as follows:
ul#main-menu li{
width:16.66%;
text-align:center
}
Okay so I combined one of your methods with this this and it worked:
.wpsight-menu li {
width:14%;
text-align:center
}
.wpsight-menu a {
display: inline-block;
margin: 0 5px 0 0;
text-decoration: none;
}
Use CSS to give your anchors (a) the same padding and margins on the left and right and a percentage width of the li, like this;
ul#main-menu {
width: 100%;
}
ul#main-menu li {
width: 20%; /* for 5 menu items */
padding: 0;
margin: 0;
display: inline-block;
}
ul#main-menu li a {
padding: 0px 5px;
margin: 0px auto;
display: block;
}
and change the width of the li depending on the number of menu items.
That should do the trick!
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:
(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
Might be a bit too early in the morning for me but I struggling to figure out what I've done wrong here.
I have a page with 9 boxes and I would like them to be positioned with 3 on one line, 3 on another and 3 on the other.
Have a look here: http://dev.tim-morgan.co.uk/other/Untitled-1.html
Right now you can see, the list bullets are showing and each box looks like it's going down like a staircase since I put in float: left;
Any ideas of what I'm doing wrong?
Thanks
You need to:
Move float: left from ul.tabs2 a to ul.tabs2 li.
Add overflow: hidden to .tabs2 to clear the floats.
Add clear: left to every 3n+1 li using :nth-child, try this:
ul.tabs2 li:nth-child(3n+1) {
clear: left
}
If you need to support Internet Explorer 8 and lower (no nth-child support), you can use http://selectivizr.com/, or just add the clear: left rule yourself to each relevant li.
You might want to remove the default styles on your <li>s, they could be interfering with the floating of the <a>s in the <li>s.
I’d suggest:
ul.tabs2 {
list-style: none;
}
ul.tabs2 li {
margin: 0;
padding: 0;
}
For getting three in a row, #thirydot’s answer looks good. If you know how wide you want each box to be, you could set that width on the <a>s, then set a width on the <ul>:
ul.tabs2 {
width: 300px;
}
ul.tabs2 li a {
width: 100px;
}
In your css add this
ul.tabs2 li {display:block;float:left;width:33%;margin:0 0 10px 0;padding:0;}
and also add overflow:hidden and list-style:none to your ul.tabs2 if you don't want bullets.