I am trying to get the submenu in Bootstrap's navbar to open horizontally, instead of vertically.
I hoped this would be something as simple as adding an extra style, e.g.
ul.dropdown-menu li {
display:inline;
}
or
.navbar-nav li.dropdown li {
display:inline;
}
but nothing changes.
I couldn't find anything useful after quite a bit of searching either. Hope to get some help here.
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;
}
smarter people than me!
I've been racking my brain for awhile with some css for this wordpress website On the navigation menu (Campus, National, World,...) I'm trying to do some custom css where when you hover your mouse over the menu items and they change color. Right now they only turn black except for the Campus menu item which changes to what I want for a moment then changes to black.
My attempt was to try this short css in the stylesheet, but it didn't work. I suspect I might have to adjust the upper-nested classes.
.menu-item-28 a:hover{
background:#1f61c4;
}
This is probably an easy question but my css-fu is pretty bad. Any help help is much appreciated!
Try changing your selector to
#menu-main-navigation li a:hover{
background-color:#1f61c4;
}
This will target any anchor (a) inside your main navigation (instead of only the one found under .menu-item-28 - ie. campus)
There is this CSS rule in the code
#nav nav > ul > li > a:hover {
background: #222222;
border-color: #222222;
color: #fff;
}
which causes the black background on hover. You probably can't change that, I suppose. But if you put another rule somewhere "later" (= below it) in the code, you can overwrite it with your own background color:
#nav nav > ul > li > a:hover {
background: #1f61c4;
}
Morning Guys,
I have a CSS issue that's driving me up the wall. I have an unordered list with custom bullet images:
.mainTable ul {
list-style-position: inside;
list-style-image: url(../img/bullet_white.png);
line-height: 18px;
color: #335;
}
Now some of these list items contain links and some do not. For the ones that do, I'd like the bullet to change on rollover. Not too tricky you'd think... Here's how I marked it up:
.mainTable ul li a:link {
padding-left:0px; // using padding as a test
}
.mainTable ul li a:hover {
list-style-image: url(../img/bullet_red.png);
padding-left:2px; // padding changes (moves link text), but bullet's still white
}
Now I've sussed (as the padding changes) that the styling is being applied to the inner link, and not the "li" container. I tried testing:
.mainTable ul li:hover
and the image changes, but it changes for all "li" tags in scope (because that's what I've told it to do), but that's not what I'm after. There must be a simple way of doing this without resorting to js but I'll be buggered if I can figure it out.
Any suggestions? All help (even if it's just "You need to use js you nugget") gratefully appreciated :)
Danny
GOT IT SORTED! (can't answer my own question yet - for some reason...)
Thanks for the heads up guys. The answer is a mixture of the above suggestions. Moving the bullets from the li tags and on to the anchors worked a treat, but the list items without the link got no bullet...DOH!
I then set up another class, "notALink", and stuck my default list styling on it. Here's the Markup if anyone's interested...
.mainTable ul { /* kill formatting on the ul */
list-style-position: inside;
line-height: 18px;
color: #335;
list-style-type: none;
}
.mainTable ul li a:link { /* link becomes the list, essentially */
list-style-image: url(../img/bullet_white.png);
list-style-position: inside;
display: list-item;
}
.notALink { /* looks like link above, just ain't a link */
list-style-image: url(../img/bullet_white.png);
list-style-position: inside;
display: list-item;
}
.mainTable ul li a:hover { /* changes the bullet image on rollover - nugget! :) */
list-style-image: url(../img/bullet_red.png);
}
Works fine - Cheers peeps, you've dug me out of a little hole I was digging myself
Danny
No, there is no way to change parent on child hover in pure CSS (2 or 3). See: Is there a CSS parent selector?
So you have two options:
Use JavaScript
or
Leave list style as empty and add bullets to childs (a or something else). That way, you will change style of a, not li.
This is what I would do;]
or (from Yi Jiang comment)
Add extra class to li elements containing a
What you can do is style the a as display: block and move it to the left (using negative margin) to cover the li:s bullet. Check this fiddle:
http://jsfiddle.net/TG5Lj/
You may need to set a background-color to the a as well if your a:s background-image doesn't completely cover the li:s.
Try applying styling to
.mainTable ul li:hover li
or something like that. It should override the rule for the parents.
EDIT: Sorry, I didn't fully understand your question. It seems to me that it's impossible to do with css as you would have to apply styling to "a li that has no 'a' descendants", which I don't think can be expressed in css selectors. As a walkaround in order not to use scripts I suggest that you change the background of the link and not the bullet image.
At this site and within the navigation are nav titles. As you can see there is an unnecessary space between each nav title and I am stumped as to why this is. Check out "classes," nav to get a good view of too much space.
I've been at this for a bit and to the point where I thought I'd ask around for a suggestion or tip.
li {
margin-top:0;
margin-bottom:0;
padding-top:0;
padding-bottom:0;
}
And for another <li> vertical spacing adjustment option:
li {
line-height:1.2em;
}
Look for anything involving height (i.e. line 324):
li, li a{
height:32px;
}
Note: I'm not sure what your xmargin or xheight in your CSS is for
I have a drop down menu made in css. When you hover over the text (ul) the menu appears (the li appears). I wanted to know, how to make a submenu, that when you hover over the li's another menu (submenu) would appear and would offer other options.
Ex:
-Tutorials (You hover over tutorials)
(Then these options appear)
-Video tutorials
-Other tutorials
-Windows (and if you hover over windows you have 3 choices)
//How do I make that!
-Windows xp
-windows 7
-Windows Vista
That is what I want to make.
Thanks people!!
you need this tutorial: son of suckerfish dropdowns
If you're using pure CSS then you just need to add a new level of styles. You haven't posted your original code, but assuming you currently have something like:
ul.menu > li > ul {
display: none;
}
ul.menu > li:hover > ul {
display: block;
}
Then you'd simply need to add:
ul.menu > li > ul > li > ul {
display: none;
}
ul.menu > li > ul > li:hover > ul {
display: block;
}
You will of course need to add some positioning code to your third level list so it appears to the right of the active menu item.
CSSPlay is a great resource with all kinds of menu's you can possibly imagine. Plus all menu's are completely cross-browser.
Check it out, I'm sure Stu got one that fits your needs:
http://www.cssplay.co.uk/menus/