I cannot for the life of me figure out how to center the navigation here:
www.cmee.org
I have tried the adding the "text-align: center;" attribute in the editor, but I have to admit that CSS isn't my thing. Might anyone be able to suggest how I can go about fixing this incredibly frustrating issue?
I'm incredibly grateful for any assistance that can be offered.
Add following lines at the bottom of your theme style.css file:
#subnav .wrap, #nav .wrap {
text-align: center;
}
#subnav ul, #nav ul {
display: inline-block;
padding: 0px;
}
#subnav li, #nav li {
float: none;
display: inline-block;
}
i have tested it and you can see the result here:
Did you try to use margin:auto ? give your menu for example id topmenu and make it something like
#topmenu{
margin:auto;
}
maybe also post the css for your menu if this doesnt help
Related
I am working on a site that that is supposed to display sub-menus when you hover over both the "References" and the "Contact Us" items in the main nav. However, these items will not display.
I have tried adding hover properties via CSS to the menu & sub-menu items but nothing seems to work. It seems to always default to the "display: none;" for the sub-menu.
Here is the URL for the site: http://fongconstruction.com
I'm not sure where to go from here, if there is a CSS fix that maybe I'm missing then any guidance would be helpful! Thanks in advance!
First you need to delete below css from custom.cs(line number 1) and style.css(line number 844) https://prnt.sc/15pru62
#nav .sub-menu {
display: block !important;
}
Also you need to delete inline style(display: none) from sub menu https://prnt.sc/15ps03v
After that add this css
#nav li ul.sub-menu {
display: none;
}
#nav li:hover ul.sub-menu {
display: block;
}
I was able to locate a solution by using a different selector that I had not thought of before:
#menu-item-5990 a:hover + .sub-menu,
#menu-item-5237 a:hover + .sub-menu {
display: block;
}
I want to remove(hide) bullets (dots) with css code, but I can`t
Please tell me what I do wrong:
1) I give class name in my case: .no-bullets
2) I use this css code:
.no-bullets {
list-style-type: none;
}
this is not working for me...
Then I use this css in theme stylesheet:
ul
{
list-style-type: none !important;
}
again nothing...
Please help me with this, thank you in advance
here is my suggestion:
ul {
list-style: none;}
the list-style properties apply to elements with display: list-item only ,make sure your list elements doesnt have any other display style.UPDATE
seeing your link your style.css file is overriding your custom style with list-style-type: disc; you have to get rid of this line.
UPDATE 2use this code in your custom css .entry-content ul > li {
list-style-type: none !important;
}
this will do the job quickly.
I have a menu, which is responsive, the only problem it has is with the sub-level, please check the example here
http://jsfiddle.net/6vp3U/409/
.sf-menu ul {
position:static !important;
display: none !important;
}
.xpopdrop ul {
display: block !important;
}
in above example, under "Item 2" there is another sub-menu under "item 2.1", that doesn't work according to the media query, I want this to work as other sub menus working, please drag the fiddle center area to see this in action.. I know it has something to do with the css "ul".. tried a lot, couldn't find a solution, I would appreciate if someone experienced with CSS can spend 5 minutes and help me fix this..
regards
I add two selectors:
.xpopdrop ul ul {
display: none!important;
}
.xpopdrop .xpopdrop ul {
display: block!important;
}
It seems like worked...
Fiddle
Alrighty, as asked, here is my question reformatted:
I am using bootstrap. My nav bar has a drop-down. But the drop-down is appearing under the wrong nav item.
This is only happening for me on FireFox 20.0 on a 2010 MacPro OSX 10.8.3
It does work on other browsers (Chrome and Safari)
Here are some links. The nav item at the far right (Zone Tools) should have the dropdown.
Image alone:
tinypic.com/r/e0kqp/5
Code is put up here. Little funkyness because I tried to strip it down to just the nav bar, but you'll get the gist.
http://bootply.com/61045
I have more links, but I cannot put more than two in at a time so far.
Thank you all.
It looks like the problem is this in your CSS..
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
font-size: 13px;
}
.navbar .nav ul li {
display: table-row;
width: 1%;
float: none;
font-size: 13px;
}
When you remove this it works, but you'll need to figure out another way to center your nav items. http://bootply.com/61059
P.S. - you don't need to include the Bootstrap scripts in Bootply.
This issue appears in Internet Explorer and I have not been able to resolve it:
#test ul li {
list-style-type: disc;
float: left;
margin-left: 10px;
font-size: 16px;
}
The code above works fine in Firefox and Chrome, but in IE7 it's not displaying the bullets.
I have tried deactivating the attribute float: left and the bullets are displaying, but the list is vertical. My list must be aligned horizontally with the bullets.
I have tried add the follow attributes:
list-style-position: inside and outside and nothing.
using display: inline makes the bullets disappear.
#test ul {
list-style-type: disc
}
and nothing
I have tried changing the margin with different values, adding padding with different values, and nothing.
You could make the lis inline and the list-style of the ul to none and then emulate the bullets using the :before pseudo element:
ul {
list-style: none;
margin: 0;
}
li {
display: inline;
}
li::before {
content: "o ";
}
Of course, instead of "o" you could use an unicode character representing a bullet.
Create the bullet with an image and set it as the background.
try with :
ul{
list-style:disc outside none;
padding:0px;
padding-left:12px;
margin-left:8px;
}
Demo
might be a bit late but including a span tag inside with display:list-item seems to fix the problem when the margin and padding adjustment fails..refer https://stackoverflow.com/a/18337398/1776573. It worked for me when the margin and padding adjustments dint solve the issue..