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.
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 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
I'm trying to duplicate the style of an existing menu using CSS.
The CMS platform that I'm using comes with given styling for the navgation. I added a new menu underneath it and am trying to make it look the same as the original. I added an ID "wpmenu" to the div that contains the navigation but the selectors don't select. I created a jsfiddle but the jsfiddle works!
It's really frustrating and I'm not sure where to turn. The html and CSS are here: http://jsfiddle.net/nRrKW/
The particular selector that seems to be failing is #wpmenu li a
Again, it works in jsfiddle but not on my website which is here: advance.trashswag.com.
I had expected to see the following CSS apply to the newly created UL nav within the "wpmenu" div:
#wpmenu li a {
display: block;
position: relative;
padding: 7px 12px;
color: #fff;
overflow: hidden;
text-transform: uppercase;
font-size: 120%;
}
But if I then inspect element on the site, the styling is not applied to those a elements.
Can anyone point out what I'm missing here?
You don't seem to have the #wpmenu li a style
also you have an invalid rule token here:
#wpmenu ul {
padding: 0;
margin: 0;
list-style: none;
}}
That might fix it!
I am currently working on the following Wordpress site:
http://2013.whitehallrow.com/
It's obvious that the horizontal menu items are not styled properly. I want the "Media" link to fit on the right side of the navbar; how do I go about changing the width of each item so that they will all fit?
I also want the menu items to be centered, so that the margins on each side are equal. My knowledge of the existing Wordpress theme's CSS is sketchy; could anyone give me some guidance?
This is a little "dirty", because it is specific for your menu and for names that have been included in it. But maybe is useful:
.main-navigation li {
margin: 0 30px 0 0;
position: relative;
}
/* For the distance of the first element */
main-navigation li:first-child {
margin-left: 50px;
}
/* For nulling the distance of the first child element */
.menu-item-type-post_type li:first-child {
margin-left: 0;
}
Of course you can do that.
Look in menu css file and find .your_menu_name li a section. Here look for padding and just adjust size.
For ex. if is padding-left:30px; replace 30 with 10 and see you working menu.
You can customize to by adding hover condition like background-color:#CCCCCC;
You can select each menu item by using CSS3 pseudo class :nth-child(N), refer this. Eg.:
.nav-menu li:nth-child(3) {
display: block;
width: 300px; /*Your individual menu-item width here*/
}
To align your menu to center you have to change your css in style.css (line no: 1460) to following
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
border-bottom: 1px solid #8293FF;
border-top: 1px solid #8293FF;
display: table;
text-align: center;
width: 100%;
}
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..