I am having difficulties restoring the bullet points in a Bootstrap navigation list. My markup is generated by WordPress but the general idea is:
<nav>
<ul class='nav navbar-nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
</ul>
</nav>
I've looked through the styles Bootstrap has applied to what is basically a list, and I can't figure out what is removing the list-style which was originally there.
I tried to set things back to the default by using the below, but this hasn't worked.
footer nav ul.nav > li {
list-style-type:disc;
}
I am hoping there are any Bootstrap wizards out there who can help me resolve this issue.
If you can't change the markup as skelly suggested, you'll have to also override the display property back to list-item, so you're CSS should look like this:
footer nav ul.nav > li {
margin-left: 40px;
list-style-type: disc;
display: list-item
}
Demo in Stack Snippets
footer nav ul.nav > li {
margin-left: 40px;
list-style-type: disc;
display: list-item
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
<nav>
<ul class='nav navbar-nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
</ul>
</nav>
</footer>
There's still a lot of other CSS styles that would be affecting the list type. If you want to remove them all, and if you can run javascript on the page, you can just remove the classes with jQuery like this:
$("footer nav ul.nav.navbar-nav").removeClass("nav navbar-nav");
Demo in Stack Snippets
$("footer nav ul.nav.navbar-nav").removeClass("nav navbar-nav");
footer nav ul.nav > li {
margin-left: 40px;
list-style-type: disc;
display: list-item
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<footer>
<nav>
<ul class='nav navbar-nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
</ul>
</nav>
</footer>
Related
I'm a newbie into Wordpress and CSS+HTML styling,
by the way I own a Wordpress Theme (Sportexx) and I'd like to make my own menu with plain HTML and CSS.
Thanks to the visual composer, I added this code to the page:
<div id = "menutop">
<ul>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
</ul>
</div>
I've also added this code to the style.css in my child theme (should remove bullets):
#menutop ul {list-style-type: none;}
but I still see the bullets in the list.
What did I do wrong?
This seems to be working for me:
<html>
<head>
<title>Test</title>
</head>
<style>
#menutop ul {list-style-type: none;}
</style>
<body>
<div id = "menutop">
<ul>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
</ul>
</div>
</body>
I agree with #GOB in the comment above. Try installing FireBug in FireFox where you can see if your CSS is being overridden.
I just put it into the parent's style.css, so for now I'll stick to this solution.
I'm using [class*="menu-class-"]:not(.menu-class-2) for my <li> elements, it works properly. The problem is when I want to point to the <a> tag inside the <li>, [class*="menu-class-"]:not(.menu-class-2) a. For some reason it doesn't work.
CSS:
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) {
display: table-cell;
}
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) a {
text-transform: uppercase;
}
HTML
<ul class="nav-menu" id="menu-main-navigation">
<li class="menu-class">
Nav 1
<ul class="sub-menu">
<li class="menu-class-3">
Nav 2
<ul class="sub-menu">
<li class="menu-class-2">Anchor, it should be lowercase</li>
</ul>
</li>
</ul>
</li>
</ul>
The problem is the <a> inside the <li class="menu-class-2"> is uppercase, but it should be lowercase, because I didn't add any property for this element. The container of the <a> (<li class="menu-class-2">), didn't get the display:table-cell property, so it works properly.
The JSFiddle link: http://jsfiddle.net/qnzos5t4/3/
The reason is because you do have a li that is not .menu-class-2:
<ul class="nav-menu" id="menu-main-navigation">
<li class="menu-class">
Nav 1
<ul class="sub-menu">
<li class="menu-class-3"> <!-- THIS ONE HERE -->
Nav 2
<ul class="sub-menu">
<li class="menu-class-2">Anchor, it should be lowercase</li>
</ul>
</li>
</ul>
</li>
</ul>
Since your css rule is using a whitespace to select the anchor after the li, every <a> descendant of it, will be uppercase. You need to use a child selector:
Updated JsFiddle
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) > a {
I wanted to let my "Kuantan" menu to stay highlighted after i hover to their child menu which is "kiosk no.35". But i try to change few way to let it stay active but i had failed to do so. Anything i miss out on my code? Please point my wrong. Thanks
Here is the html code:
<ul class="treeview-menu">
<li class="dropdown"><i class="fa fa-angle-double-right"></i> Kuantan
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=35" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.35</a></li>
</ul>
</li>
<li class="dropdown"><i class="fa fa-angle-double-right"></i> UTC Kuantan
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=36" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.36</a></li>
</ul>
</li>
<li class="dropdown"><i class="fa fa-angle-double-right"></i> Temerloh
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=37" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.37</a></li>
</ul>
</li>
<li class="dropdown"><i class="fa fa-angle-double-right"></i> Bentong
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=6" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.6</a></li>
</ul>
</li>
<hr/>
</ul>
Here is the css where i hover the dropdown then the dropdown-menu will came out:
/*3rd level sidebar menu */
.dropdown:hover .dropdown-menu {
display: block;
left:220px;
top:0;
}
What i want is that after i hover the dropdown and went to dropdown-menu, the dropdwn will stay highlighted. Is there possible? Sorry i'm still new to this css skill.
As explained in my comment - .dropdown should still be "highlighted" on :hover, because .dropdown-menu is nested inside it and therefore you are still hovering over .dropdown.
/* Assuming you are making nested lists display:none */
ul{
list-style: none;
}
.dropdown-menu{
display: none;
}
.dropdown:hover{
background: yellow;
}
.dropdown:hover .dropdown-menu {
display: block;
left:220px;
top:0;
}
DEMO HERE
By using jQuery this is one option with your current code (fiddle here: https://jsfiddle.net/j0wLj6z9/)
<script type="text/javascript">
$(document).ready(function(){
$('.dropdown').hover(function(){
$(this).toggleClass('highlighted');
});
});
</script>
and your css is whatever you'd like:
.highlighted
{
background: yellow;
}
Also include jQuery in your project:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
I don't know anything about HTML codes and I'm using a template I used online for my blog, www.lemontierres.com. I have some links to pages at the top of my blog but I want to have them in the center instead of on the left side of my blog, and I don't know how to fix this? I Googled and found some answers but I don't know how to apply them to my situation. Any help would be appreciated!
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li>about me</li>
<li>contact/business inquiries</li>
<li><a class='drop-ctg' href='#'/>
<ul>
<li><a href='#'> 1</a></li>
<li><a href='#'> 2</a></li>
<li><a href='#'> 3</a></li>
<li><a href='#'> 4</a></li>
</ul>
</ul>
Simple CSS would solve this
ul {
text-align: center;
}
I think this is what you are looking for. The first CSS puts all of the <li> elements inline rather than stacked and the second centers all of the text.
ul.menu li {
display: inline;
}
ul {
text-align: center;
}
JSFIDDLE DEMO
put <center>
<ul>
<li>link</li>
<li>Link2</li>
</ul>
</center>
That is how I would do it.
Basically you just need to put the center tags around the code for the links.
If that doesnt work do what JRULLE and Vector said.
I've created a drop-down navigation with CSS only.
If I hover the button and the submenu comes out.
But then the body will be higher.
I don't want that the body will be higher.
Here the files:
http://jsfiddle.net/UHQV5/
I think the position: relative; is false.
How about this one?
added this:
nav ul ul{
position: absolute;
margin-left: -10px;
}
and removed some unnecessary ones.
jsFiddle
Nice looking website,
I messed with the code just a little and found the making the tag have a id for the css. Then in the css setting the postion to fixed!
The Code:
From this
<nav>
<ul id="navigation">
<li>Home</li>
<li>Bücher...»
<ul>
<li>für kleine Leser</li>
<li>für große Leser</li>
<li>Schulbücher</li>
</ul></li>
<li>und mehr...»
<ul>
<li>Filme</li>
<li>Ebooks</li>
</ul></li>
<li>Seit 1851»
<ul>
<li>Firmenhistory</li>
</ul></li>
</ul>
</nav>
To This
<nav id="nav">
<ul id="navigation">
<li>Home</li>
<li>Bücher...»
<ul>
<li>für kleine Leser</li>
<li>für große Leser</li>
<li>Schulbücher</li>
</ul></li>
<li>und mehr...»
<ul>
<li>Filme</li>
<li>Ebooks</li>
</ul></li>
<li>Seit 1851»
<ul>
<li>Firmenhistory</li>
</ul></li>
</ul>
</nav>
And then in the css just put in:
#nav {
postion: fixed;
}