I got this problem that when I hover on my dropdown menu, the background changes and the color does also. But i can't get it to white..
What to do?
http://hcl.konggulerodhosting.dk/index.html
<nav>
<div id="topBar" data-toggler="is-active" class=" top-bar row ">
<button type="button" data-toggle="topBar" class="mobile__close hide-for-large"> </button>
<div class="small-12 columns">
<div class="top-bar-left">
<div class="site-logo"><img src="assets/images/logo.svg" alt=""></div>
</div>
<div class="top-bar-right">
<p class="mobile__headline hide-for-large">Menu</p>
<ul data-responsive-menu="drilldown large-dropdown" data-back-button="<li class="js-drilldown-back drilldown-back"><a>Back</a></li>" class="menu">
<li class="active">Forside</li>
<li>Undersøgelser
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</li>
<li>Tilskud</li>
<li>Høreapparat</li>
<li>Information</li>
<li>Om os</li>
<li class="search__toggler">
<button type="button" data-toggle="search" id="search-toggler"></button>
</li>
</ul>
</div>
</div>
</div>
</nav>
.is-dropdown-submenu-item {
color:white;
}
is not working. So i dont know what to do..
Please don't link your site as it's bad for archiving purposes.
You need to change the link colour.
.is-dropdown-submenu-item a:hover {
color:#fff;
}
Check this image.............................................
Related
I have a type card:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class='card'>
<div class='card-header'>
<div class='row'>
<div class='col'>
<h5 class='mb-0'>Element</h5>
</div>
<div class='col'>
<p class='text-right mb-0'>n</p>
</div>
</div>
</div>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>Item 1</li>
<li class='list-group-item'>Item 2</li>
<li class='list-group-item'>Item 3</li>
<ul>
<div class='card-footer'>
<div class='input-group'>
<input type='text' class='form-control' placeholder='New item'>
<div class='input-group-append'>
<button class='btn btn-outline-secondary' type='button'> + </button>
</div>
</div>
</div>
</div>
The more items are added, the more the header where the number of items comes from is moved.
How can I make it stay in position when the items are more?
I tried sticky-top but it's stuck all the way to the top so it has a margin or padding on top.
that would be my approach:
basicaly: set position:relative to parent element (.card) and position:fixed to child element (.card-header)
.card{
position: relative; /* all child elements gets positioned relative to this element */
}
.card-header{
position: fixed; /* stay fixed on top */
top: 0;
width: 100%;
z-index: 1; /* needed to stay above other elements */
}
.list-group{
padding-top: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='card'>
<div class='card-header'>
<div class='row'>
<div class='col'>
<h5 class='mb-0'>Element</h5>
</div>
<div class='col'>
<p class='text-right mb-0'>n</p>
</div>
</div>
</div>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>Item 1</li>
<li class='list-group-item'>Item 2</li>
<li class='list-group-item'>Item 3</li>
<li class='list-group-item'>Item 4</li>
<li class='list-group-item'>Item 5</li>
<li class='list-group-item'>Item 6</li>
<li class='list-group-item'>Item 7</li>
<li class='list-group-item'>Item 8</li>
<li class='list-group-item'>Item 9</li>
<ul>
<div class='card-footer'>
<div class='input-group'>
<input type='text' class='form-control' placeholder='New item'>
<div class='input-group-append'>
<button class='btn btn-outline-secondary' type='button'> + </button>
</div>
</div>
</div>
</div>
You need to apply css to your ul for fixed card header when item increase. You can change ul height as suitable as you.
.list-group-flush{height:400px;overflow-y:auto;}
.list-group-flush{height:400px;overflow-y:auto;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class='card'>
<div class='card-header'>
<div class='row'>
<div class='col'>
<h5 class='mb-0'>Element</h5>
</div>
<div class='col'>
<p class='text-right mb-0'>n</p>
</div>
</div>
</div>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>Item 1</li>
<li class='list-group-item'>Item 2</li>
<li class='list-group-item'>Item 3</li>
<li class='list-group-item'>Item 1</li>
<li class='list-group-item'>Item 2</li>
<li class='list-group-item'>Item 3</li>
<li class='list-group-item'>Item 1</li>
<li class='list-group-item'>Item 2</li>
<li class='list-group-item'>Item 3</li>
<li class='list-group-item'>Item 1</li>
<li class='list-group-item'>Item 2</li>
<li class='list-group-item'>Item 3</li>
<ul>
<div class='card-footer'>
<div class='input-group'>
<input type='text' class='form-control' placeholder='New item'>
<div class='input-group-append'>
<button class='btn btn-outline-secondary' type='button'> + </button>
</div>
</div>
</div>
</div>
I am working a little exercise on codepen and trying to style the tabs of navbar using boostrap, but when I was using the original code on the site or adding
class="list-inline"
It ended up with the items on each line like this.
Can anyone explain why that happened? I am using boostrap 4 and here is my code:
<nav class="navbar navbar-default">
<div class="navbar-header">
Brand
</div>
<ul class="list-inline">
<li>Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
you would have to use list-inline-item class to the li item as well.
see the fiddle below
https://jsfiddle.net/pr6t58wL/
<nav class="navbar navbar-default">
<div class="navbar-header">
Brand
</div>
<ul class="list-inline">
<li class="list-inline-item">Home</li>
<li class="list-inline-item">Menu 1</li>
<li class="list-inline-item">Menu 2</li>
<li class="list-inline-item">Menu 3</li>
</ul>
</nav>
Please use this code I think it is work on your requirement.
<div id="exTab1" class="container">
<ul class="nav nav-pills">
<li class="active">
Overview
</li>
<li>Using nav-pills
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="youridname1">
<h3>Content's background color is the same for the tab</h3>
</div>
<div class="tab-pane" id="youridname1">
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
</div>
</div>
</div>
I am trying to sliding down a sub menu. The reference which I am following is -- https://codepen.io/shshaw/pen/gsFch
But the dropdown doesn't slide. It just appears on hover.
Html code --
<nav id="main-nav" class="clearfix">
<div class="nav-inner clearfix">
<div class="menu-main-navigation-container">
<ul id="nav" class="clearfix page">
<li class="item">
Menu
<ul class="sub-menu">
<li class="item">Sub Menu 1</li>
<li class="item">Sub Menu 2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Demo -- https://jsfiddle.net/squidraj/seqc1w9f/6/
Any help is highly appreciated.
display cannot be animated. This needs to be removed.
ul#nav li ul {
display: none;
I have the following Bootstrap navbar, but when it displays in the xs layout, I want it to show on one line. How can I force it to display on one line and not break. It obviously has enough room.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Company Name</a>
</div>
<ul class="nav navbar-nav visible-sm-block visible-md-block visible-lg-block">
<li class="active">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<span class="glyphicon glyphicon-cog"></span>
<ul class="dropdown-menu">
<li>Settings 1</li>
<li>Settings 2</li>
<li>Settings 3</li>
<li class="divider"></li>
<li>Settings A</li>
<li>Settings B</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-menu-hamburger"></span>
<ul class="dropdown-menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li class="divider"></li>
<li>Menu A</li>
<li>Menu B</li>
<li>Menu C</li>
</ul>
</li>
</ul>
<div style="display:none" class="navbar-collapse">
<p class="navbar-text fix_navbar_left_larger">Company Name</p>
<p class="navbar-text fix_navbar_left_xs">Company Name</p>
<p class="navbar-text visible-sm-block visible-md-block visible-lg-block"></p>
<p class="navbar-text visible-sm-block visible-md-block visible-lg-block"></p>
<a class="navbar-brand navbar-brand navbar-right dropdown" href="#">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</a>
<a class="navbar-brand navbar-brand navbar-right" href="#">
<span class="glyphicon glyphicon-cog"></span>
</a>
</div>
</div>
</nav>
<div class="pagecontent">
<p class="visible-xs-block">seen on xs screens.</p>
<p class="visible-sm-block">seen on sm screens.</p>
<p class="visible-md-block">seen on md screens.</p>
<p class="visible-lg-block">seen on lg screens.</p>
</div>
</div>
Add class "pull-left" to the navbar header like so...<div class="navbar-header pull-left">. Also add class "pull-right" to the two dropdown list items like so...<li class="dropdown pull-right">.
See Fiddle
For future reference, just use the navbar default template from http://getbootstrap.com/components/#navbar to compare with your own code to find mistakes.
try adding pull-right to those two <li class="dropdown"> classes
For this you have to play with pull-left pull-right classes of bootstrap.
See my fiddle
Navbar is taking full width so give that class pull-left and other pull-right but your inner menu, they also needed float to get in one line so i gave both of them float left and right and you got the result :)
I'm trying to make a bootstrap nav (v2.3.2) and the formatting looks like:
This:
wrong http://tastytreatthursday.com/nav1.jpg
Instead of this:
wrong http://tastytreatthursday.com/nav2.jpg
<div class="navbar visible-desktop visible-tablet">
<div class="navbar-inner">
<a class="brand" href="http://myurl" style="margin:0; padding:0;"><img style="z-index:1; position:relative;" height="125px" width="125px" src="myLogo.png"></a>
<ul class="nav nav-pills">
<!--item-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Test title<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Test 1</li>
<li>Test 2 Test 2 Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<!--item-->
</ul>
</div>
</div>
Can anyone point out what I'm doing wrong?
Would make it easier to answer your question with a Fiddle of what you have. Looks like you may have done changes to your CSS, as shown in http://jsfiddle.net/Wa5vS/, it seems to work properly with your same html.
Even if you add:
.dropdown-menu {
text-align: center;
}
Shows properly, so you must have changed something.
I tried your code and it worked for me. Makere usre you put it inside a row class and inside another span class. When I put the code it work like a charm.
<section class="row-fluid ">
<aside class="span12">
<div class="navbar visible-desktop visible-tablet">
<div class="navbar-inner"> <a class="brand" href="http://myurl" style="margin:0; padding:0;"><img style="z-index:1; position:relative;" height="125px" width="125px" src="wp-content/themes/img/lcva_logo.png"></a>
<ul class="nav nav-pills">
<!--item-->
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Test title<span class="caret"></span> </a>
<ul class="dropdown-menu">
<li>Test 1</li>
<li>Test 2 Test 2 Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<!--item-->
</ul>
</div>
</div>
</aside>
</section>