I have a bootstrap navbar and I want to underline the links on hover. The issue is that the underline (using border-bottom) is sitting directly under the li element and I want to attach it to the bottom of the grandparent div [the nav in the below example].
Additionally, I want to limit the width of this underline to the width of the text itself, not the entire element it's underlining.
<nav>
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand header-title" href="#/home">Title!</a>
</div>
<div class="header-links">
<ul class="nav navbar-nav my-nav" role="menu">
<li>Link 1
</li>
<li>Link 2
</li>
</ul>
</div>
</div>
</nav>
.my-nav > li:hover {
border-bottom: 0.2em solid white;
}
See jsfiddle for full example, http://jsfiddle.net/8kzpjeyv/1/embedded/result/ (make sure your viewport is wide enough so menu isn't collapsed)
Want to make the underline at the very bottom of the blue bar so it looks like it's part of the white body
Want to limit the width of the underline to the exact width of the text
You may use padding-bottom:
.my-nav > li:hover {
padding-bottom: .2em;
border-bottom: 0.2em solid white;
}
demo
http://jsfiddle.net/8kzpjeyv/3/
.my-nav a{
padding-left:0!important;
padding-right:0!important
}
Related
So, I have this menu:
What can I do to the menu fill horizontally the entire page? Am I using the wrong bootstrap classes? It just fills a part of the page. Can someone teach me what to do here?
ul {
list-style-type: none;
border-bottom-style: solid;
border-bottom-color: green;
position: relative;
}
li {
display: inline;
padding: 30px;
}
#menu a {
color: black;
}
#menu a:hover {
color: green;
font-weight: 700;
text-decoration: none;
border-bottom-style: solid;
border-bottom-color: green;
border-bottom-width: 6px;
border-radius: 4px;
}
<body>
<section>
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid wrapper">
<div class="navbar-header">
<ul id="menu">
<div class="row">
<div class="col-md-12">
<li><img src="Imagens/Logo.png"></li>
<li id="menu1">About us</li>
<li> Act</li>
<li> News</li>
<li> Videos</li>
<li> Contact us</li>
</div>
</div>
</ul>
</div>
</div>
</div>
</section>
</body>
Im not an expert at bootstrap and I don't know for what the class is used to do but if I remove the div-element: <div class="navbar-header"></div> it worked in my Chromium.
With Chromes Developer Tools you are able to find bugs like this
(Ctrl+Shift+I or Ctrl+Shift+C to use the Element Inspector directly)
Maybe you could add style="text-align: justify"; on the wrapping div around your <li> tags to set the spaces between the menu entry's dynamically.
Hope it would help you.
You can set the width of navbar-header to 100% with the below code to make the varbar cover the full length horizontally however it's not going to perfect functional navbar.
.navbar-header{
width:100%
}
The reason being, it does look like this is possibly a Bootstrap 3 navbar that you're trying to use with bootstrap 4 which is why it's not working. The classes are different between BS3 and BS4.
Check http://getbootstrap.com/docs/4.0/examples/navbars/ for examples for how to implement a bootstrap 4 navbar.
Could you tell me how to bring menu's black background in front of the body text on the image below.
Here is JSFiddle link:
https://jsfiddle.net/johnking/j58cubux/6/
When you scroll down, the menu is not properly visible
<body>
<div class="uppersection">
<div class="menu" id="home">
<ul>
<li>
Home
</li>
<li class="drop">
About
<ul class="haha">
<li>Who am I?</li>
<li>Accomplishments</li>
<li>Academic Work</li>
<li>Future Plans</li>
</ul>
</li>
<li>
Resume
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<div class=textupper>Hello, I am John <br><br>Welcome To My Website!<br> <br>Feel Free To Navigate Around</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Hi</body>
How can I fix the problem using css?
Thanks.
You need to add background for a too in case if parent li is hovered:
.menu ul li:hover a {
background-color: #00AFF0;
}
Demo: https://jsfiddle.net/j58cubux/7/
Or better solution is to set a background color to transparent by default:
.menu ul li a {
text-decoration: none;
color: white;
font-size: 21px;
text-align: center;
font-family: Segoe UI Local;
background-color: transparent; /* make it transparent */
}
Demo: https://jsfiddle.net/j58cubux/8/
Your menu a has a black background that is showing up above the blue background of the li.
Just remove that black background (remove this line):
background-color: black;
from your .menu ul li a definition.
JSFiddle: https://jsfiddle.net/j58cubux/10/
use the property "z-index: 1000;" in ".menu". So fix the menu at the top regardless of the scrolling content.
.menu {
background-color: black;
min-height: 77px;
width: 100%;
position: fixed;
z-index: 1000;
}
See you later!
I made a nav with padding on each side and a background color. I have a default color on the text and made the background turn another color when hovered. The issue is that i want the text to change color when the background is hovered and not the text only because i need to use the same color as the default text for the background color[when hovered] right now if i hover then it will basically be invisible text since the background and text will be the same color. I want the text color to change even when hovering the space outside the text and not the text exclusively.
jsfiddle - http://jsfiddle.net/ucsk99cL/
<aside class="sidebar">
<nav>
<ul>
<li style="">home</li>
<li>about us</li>
<li>orders</li>
<li>gallery</li>
<li>contact</li>
</ul>
</nav>
</aside>
.sidebar{
float:left;
margin:20px;
margin-right:150px;
}
nav ul li a{
text-decoration:none;
font-family:myriad pro;
font-size:20px;
color:#3d2316;
}
nav ul li{
padding-top:26px;
padding-bottom:26px;
padding-left:57px;
padding-right:57px;
margin-bottom:3px;
background-color: #CBAFA2;
}
nav ul li:hover{
background-color: #3D2316;
}
Just change the color when hovering over the parent, li element:
Updated Example
nav ul li:hover a {
color: #fff;
}
And if you want to be able to click anywhere within the li, you would have to add the padding to the anchor elements as opposed to the li elements. Just change the display to inline-block so that it respects the padding. I also made a few other changes, see the example.
nav ul li a {
padding:26px 58px;
display:inline-block;
}
Try this
<aside class="sidebar">
<nav>
<ul>
<li id="test">home</li>
<li id="test">about us</li>
<li id="test">orders</li>
<li id="test">gallery</li>
<li id="test">contact</li>
</ul>
</nav>
Add the following css code;
#test:hover a {color:red;}
I have a couple of problems to which the solution has eluded me. The first problem:
As a horizontal navbar, that section needs to span the entire width of the screen. This is all well and good on my monitor, but when I zoom in or adjust the browser width so that the horizontal scrollbar appears, the navbar background cuts off at the length equal to the browser's width. That is, no matter what the size or zoom, the navbar will span the entire visible width, but scrolling even a little to the right will show you that the navbar does not span the entire page width.
The second problem relates to the dropdown feature. At the moment, the width adjusts automatically to the width of the longest word (ie, spaces cause words to break to the next line). Firstly, how do I stop this, and secondly, is it possible to adjust the width to always be as wide as the distance between the borders to either side of the main navbar links? (EDIT: Ignore the first part of this paragraph. I accidentally deleted white-space:nowrap from the CSS. Second part is still an issue, though)
Link to fiddle
HTML:
<nav class="bg">
<ul class="width nav">
<li><span class="bord"></span></li>
<li>DropLink
<ul class="drop">
<li>LongerLinkName</li>
<li>LongLink WithSpace</li>
<li>Link</li>
</ul>
</li>
<li><span class="bord"></span></li>
<li>Link</li>
<li><span class="bord"></span></li>
<li>Link</li>
<li><span class="bord"></span></li>
<li>Link</li>
<li><span class="bord"></span></li>
<li>Link</li>
<li><span class="bord"></span></li>
</ul>
</nav>
CSS:
*{margin:0;padding:0;font-size:small;vertical-align:middle;}
a{color:#F00;text-decoration:none;}
.width{margin:0 auto;min-width:1000px;width:84%;}
.bg,.drop{background:#000;}
nav>ul{width:100%;text-align:justify;font-size:0;position:relative;}
nav>ul:after{content:"";width:100%;display:inline-block;}
nav li{list-style:none;display:inline-block;position:relative;}
nav a{display:inline-block;background:rgba(0,0,0,0);transition:background 0.2s linear;padding:8px;}
nav a:hover{background:rgba(0,0,255,1);}
.drop{position:absolute;left:-1000px;top:-1000px;opacity:0;transition:opacity .5s,top 0 .25s,left 0 .25s;border-left:1px solid #BBB;border-right:1px solid #BBB;border-bottom:1px solid #BBB;}
.nav li:hover .drop{left:0;top:100%;opacity:1;transition:opacity .5s,top 0s,left 0s;}
.bord{border-left:1px solid #000;border-right:1px solid #555;padding:7px 0;}
Also, while I'm at it, how come I can't get the borders to be exactly the same height as the navbar itself? If I increase the padding, it becomes a pixel too long. If I decrease the padding, it becomes a pixel too short.
Also, apologies if your browser requires prefixes in the code. I substituted prefixed CSS for a script that does it for me.
For your first issue I was unable to replicate it (maybe I misunderstood you).
For your second issue you can stop the wrapping of the link in the nav with the following css:
.nav a {
//other styles
white-space: nowrap;
}
I think I've got what you're after:
HTML (removed the border li's because the parent li of the dropdowns needs to be the full width you want the dropdown to be):
<nav class="bg">
<ul class="width nav">
<li>DropLink
<ul class="drop">
<li>LongerLinkName</li>
<li>LongLink WithSpace</li>
<li>Link</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
CSS:
* {margin: 0; padding: 0; font-size: small; vertical-align: middle;}
a {color: #F00; text-decoration: none;}
.width {margin: 0 auto; min-width: 1000px; width: 84%; }
.bg {min-width:1000px;}
.bg, .drop {background: #000;}
nav>ul {width: 100%; text-align: justify; font-size: 0; position: relative;}
nav>ul:after {content: ""; width: 100%; display: inline-block;}
nav ul li {border-right: 1px solid #555; list-style: none; display: inline-block; position: relative; text-align:center; width:19%;}
nav ul li:first-child {border-left:1px solid #555;}
nav a {display: inline-block; background: rgba(0,0,0,0); transition: background 0.2s linear; padding: 8px;}
nav a:hover {background: rgba(0,0,255,1);}
.drop {position: absolute;left: -1000px;top: -1000px;opacity: 0;transition: opacity .5s, top 0 .25s, left 0 .25s;border-left: 1px solid #BBB;border-right: 1px solid #BBB;border-bottom: 1px solid #BBB;}
.nav li:hover .drop {left: 0;top: 100%;opacity: 1;transition: opacity .5s, top 0s, left 0s;}
nav ul ul {min-width:100%;}
nav ul ul li,
nav ul ul li a {border:0;display:block;text-align:left;white-space:nowrap;width:auto;}
Question 1: I'm not 100% sure what you're looking to do here, but the problem you're having appears to stem from the following:
.width{margin:0 auto;min-width:1000px;width:84%;}
Changing this line to the following resolves your issue, but may introduce other issues if you intentionally had the width set smaller:
.width{margin:0 auto;min-width:1000px;background:#000;width:84%;}
Question 2: I recently answered a very similar question at: Li element breaking content even with display block
All the browsers are displaying my site good, only internet explorer doesn't.
I've got a menu with background color set in CSS, I've added padding to make sure there is room around the link itself.
Internet Explorer doesn't take the bottom padding.
This is the HTML:
<div class="moduletable_menu">
<ul class="nav menu">
<li class="item-101 current active parent"><a href="/" >Reclamebureau</a></li>
<li class="item-102"><a href="/contact.html" >Contact</a></li>
<li class="item-125"><a href="/diensten.html" >Diensten</a></li>
<li class="item-126"><a href="/portfolio.html" >Portfolio</a></li>
</ul>
</div>
This is the CSS code for the hover and active state:
ul.menu li a:hover,
ul.menu li.active a,
ul.menu li.current a {
display:inline;
color: #ffffff;
background-color: #9a5574;
z-index:10;
text-decoration:none;
padding: 21px 14px 50px 14px;
}
This is the website I'm talking about: www.appelmeule.com
Thank you very much