I am using twitter bootstrap and my menu currently display like:
which is perfect but i need to when in mobile view have the menu display like:
Now I know I need to use media query's and such that's not the problem, the problem is how in CSS do i get my menu styled like that with the lines and such...?
Here's is the HTML:
<!--SUBMENU-->
<div class="row-fluid">
<div class="span12 submenu">
<ul class="nav menu nav-pills">
<li class="item-109"><a href="/stradix/index.php/company-profile" >Company Profile</a></li>
<li class="item-108"><a href="/stradix/index.php/due-diligence" >Due Diligence</a></li>
<li class="item-110"><a href="/stradix/index.php/our-solution" >Our Solution</a></li>
<li class="item-111"><a href="/stradix/index.php/loan-process" >Loan Process</a></li>
<li class="item-112"><a href="/stradix/index.php/currency-converter" >Currency Converter</a></li>
<li class="item-113"><a href="/stradix/index.php/loan-calculator" >Loan Calculator</a></li>
<li class="item-114"><a href="/stradix/index.php/news" >News</a></li>
<li class="item-115"><a href="/stradix/index.php/important-downloads" >Downloads</a></li>
</ul>
</div>
</div>
<!--SUBMENU-->
and The CSS to override default bootstrap:
.submenu .nav-pills > li > a {
font-size:1.25em;
padding:0;
margin:2em 0.9em 0 0;
padding: 0 0.9em 0 0;
color:#6D6E70;
border-right:1px solid #A7A9AB;
border-radius:0;
}
.submenu .nav-pills a:hover {
background:none;
color:#00ADEE;
}
.submenu .nav-pills > .active > a {
background:none;
color:#00ADEE;
}
.submenu .nav-pills > li:last-child > a {
border-right:none;
padding: 0;
margin-right:0;
}
I Would post it on JSFIDDLE But for some reason I am still since Friday unable to connect to jsfiddle..
Any Help Greatly appreciated.. Thanks.
You can do something like this to achieve the desired effect
#media (max-width: 480px) {
.nav-pills > li {
float: left;
width: 50%;
}
}
Check out my JSFiddle for an example
Related
The thing that's causing the problem is that when I make the size of the window smaller (restore down), the 4th sub div of class=Menu is not behaving like the other 3 divs, which I gave 25% width each. Instead, it is overflowing horizontally and going past the body, header and footer.
/*---------Dropdown----------*/
.Menu, .Menu ul {
padding: 0;
margin: 0;
list-style: none;
width:25%;
}
.Menu li {
width: 14.84em;
}
.Menu li ul { /*Hides dropdown*/
position: absolute;
left: -999em;
}
.Menu li:hover ul { /*Makes the dropdown show on hover*/
left: auto;
}
.Menu a { /*Styles the links on menubar */
color: black;
text-decoration: none;
display: block;
}
.Menu a:hover { /*background color of links change on
hover*/
background-color: #dcefdc;
}
.Menu div a{
padding-top:11px;
}
.Menu div a:hover{
height:50px;
}
.liwidth{
float:left;
background-color:#4CAF50 ;
height:50px;
}
/*----------Dropdown ends-----------*/
<div id="DivMenu">
<div class="Menu"><a style="text-decoration:none;" href="index.html">HomePage</a></div>
<div class="Menu"><a style="text-decoration:none;" href="About.html">About</a></div>
<div class="Menu"><a style="text-decoration:none;" href="Survey.html">Take our survey </a></div>
<div class="Menu">
<li>
Login/Register
<ul>
<div>
<li class="liwidth">
<a class="linkvalign" href="Login.html">Login</a>
</li>
<li class="liwidth" >
<a class="linkvalign" href="Register.html">Register</a>
</li>
</div>
</ul>
</li>
</div>
</div>
I can see that the thing causing the problem is the <li>'s in the 4th div, but I can't figure out how to arrange it so that it doesn't overflow.
I've tried removing the <li> tags altogether but that just causes more issues.
I'm not completely sure I understand what you're trying to do, and therefore what the proper solution should be, but adding overflow: hidden to .Main will prevent its content from overflowing at least.
I need to align dropdown menu along the length of the page. I have a menu :
<ul class="nav navbar-nav menu">
<li>About the company
<img src="images/arr1.png" ></img>
<ul>
<li class="first_li">Mission</li>
<li>History</li>
<li>Vacancy</li>
<li>Best Experts</li>
</ul>
</li>
</ul>
Then I have some css styles to make this dropdown menu to be align in as I thougth right manner.But it doesn't work correctly.
.menu li{
list-style: none;
float: left;
line-height:84px;
}
.menu li:hover > ul {
display: block;
background-color: rgb(231,231,231);
position:absolute;
top:84px;
left : 0px;
width: 100%;
text-align:center;
padding:0;
z-index:1;
}
.menu .language:hover > ul {
display:block;
width:84px;
line-height:30px;
}
Part of the problem looks like you have most of your list style in the 'hover' part. Try putting that into the general menu style.
I am working on a pretty simple menu with just one level of submenu items.
I have managed to get the styling as I want it, only that once the parent item is selceted (it displays a background image)te submenu items then also display that background image, which shouldn;t happen.
Here is my css
#fav-nav .navigation li a:hover,
#fav-nav .navigation li.active a{
color: #fff;
background: url(../../../images/menu-back.png) no-repeat top;
}
#fav-nav .nav-child li a:hover,
#fav-nav .nav-child li a:active {
background-image: none;
color: #fff;
}
Here is the html, sorry it's out of a joomla site, I hope I got all the relevant info here.:
<div class="navigation">
<div class="moduletable">
<ul class="nav menu">
<li class="item-102 deeper parent">FENCING
<ul class="nav-child unstyled small">
<li class="item-106">Fence Panels</li>
<li class="item-107">Fence Posts</li>
<li class="item-108">Gates</li>
<li class="item-109">Gate Furniture</li></ul></li>
<li class="item-103 current active">
TIMBER</li></ul>
</div>
</div>
</div>
Any help would be really appreciated.
Thanks
Make the following changes in your css
#fav-nav .nav-child li > a:hover,
#fav-nav .nav-child li > a:active {
background-image: none;
color: #fff;
}
Trying to change individual links in navbar to different colors when hovered. Can't seem to figure it out.
HTML:
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li class="page-scroll">
1
</li>
<li class="page-scroll">
2
</li>
<li class="page-scroll">
3
</li>
<li class="page-scroll">
4
</li>
</ul>
</div>
CSS:
.navbar-custom li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active
{
outline: 0;
background-color: #bdc3c7 !important;
color: #fff;
}
Have the current links set to red. But would like each individual link to have a different color. E.g. Link1 = Red, Link2 = Blue.
I am having trouble doing this! Help appreciated!
Thanks!
if you use SASS, it could be done in a more cleaner way like this in your scss file:
$colors: (1: red, 2: blue, 3: yellow, 4: black);
#each $anchor, $color in $colors {
#{".navbar-custom .nav li:nth-child("+ (1 + $anchor) + ") a:hover"} {
background-color: $color;
}
}
which will generate the CSS:
.navbar-custom .nav li:nth-child(2) a:hover {
background-color: red;
}
.navbar-custom .nav li:nth-child(3) a:hover {
background-color: blue;
}
.navbar-custom .nav li:nth-child(4) a:hover {
background-color: yellow;
}
.navbar-custom .nav li:nth-child(5) a:hover {
background-color: black;
}
Now you could add as many as different colors for all your links and let the SASS generate the CSS for you.
Yeah, just need to class them up uniquely
HTML
<li class="hidden colour1">
</li>
<li class="page-scroll colour2">
1
</li>
<li class="page-scroll colour3">
2
</li>
CSS:
.colour1:hover { background-color:blue; }
.colour2:hover { background-color:red; }
.colour3:hover { background-color:green; }
You would need to assign their CSS for each individual class and give the different link different class
like
.pagescroll1{
}
.pagescroll2{
}
and the call them from your HTML
The elegant solution is to select by attribute value. example for the first one:
a[href="#link1"]:hover,
a[href="#link1"]:active,
{
outline: 0;
background-color: #bdc3c7 !important;
color: #fff;
}
however, this works only when you're directly selecting the a-elements. With your third selector li.active, there is no information in that element as to where it links. in this case, you'll have to add classes as suggested by rob.
I am trying to setup a menu with sub menu that contains ul. My question is how to remove the sub ul menu background image that inherits from the menu ul. I appreciate any help. Thanks a lot!
my html
<ul id="menuBar">
<li id="test1">test1</li>
<li id="test2">Pro1
<div class="subMenu">
<ul>
<li>sub1</li> //all li a would get the same
//backgroundimage btForTest2.jpg
// butI just want a clean background
<li>sub2</li>
<li>sub3</li>
</ul>
<ul>
<li>Volleyball</li>
<li>Walking</li>
<li>Water Shoes</li>
</ul>
</div> <!--end of submenu-->
</li>
</ul>
CSS:
#menuBar #mens a{
background:url("../images/btForTest2.jpg") no-repeat;
display:block;
border-right:1px solid #ffffff;
width:112px;
height:37px;
}
.subMenu li a{
list-style:none;
margin: 0;
padding: 5px;
width: 200px; //width is 112px not 200 px
float: left;
color:#ffffff;
text-decoration:none;
}
.subMenu li a
{
background: none;
}
if it is not sticking, you can add the !important flag
.subMenu li a
{
background: none !important;
}
Add the following to the .subMenu li a section:
background:none !important;
Edit: Opened tab before durilai answered, so I didn't see his answer...
Instead of adding another rule to overwrite the mistake, rewrite the selector on your first rule to only apply to the outer list items:
#menuBar > li > a {
background: red;
}
> means a direct descendant.