How can I change the text position of drop down menu text & nav bar drop down menu background colour opacity?
Question
Q1 How can I center my navigation bar drop down menu text, when I try to use text-align:center; it affects the main nav bar text which I don't want.
Q2 How do I change the opacity of the background color when a user hover overs a page name on the drop down menu?
When the user hovers over a page on the drop down menu the white background affects the white text on the drop down menu. In addition, I was wondering how I could create it's own CSS for this part because, I think right now the main nav bar will be affected if you change the opacity if you click on the drop down menu from the nav bar when the background colour of the text on the nav bar goes white.
Below is my code.
HTML
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<meta charset="UTF-8">
<title>Liam Docherty | London Web Developer & GFX designer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#section3">Contact</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
<li><a href="#">Clients</a>
</li>
<li><a href="#contact-me">Contact Me</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section class="section1">
<div class="hero"></div>
<a href= ".section2"><i class="fa fa-angle-down" style="font-size:100px;"></i></a>
</section>
<section class="section2">
<a href = ".section2"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a>
</section>
<section class="section3" id="section3">
<a href = "#bs-example-navbar-collapse-1"> <i class="fa fa-angle-up" style="font-size:100px;"></i></a>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
<footer>
<div class="page">
<h1 class="footer">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h1>
</div>
</footer>
</html>
CSS
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
a:hover {
color: red;
text-decoration: none;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
}
.section2 {
//height: 95vh;
background-color: #A59E8C;
text-align: center;
color: white;
}
.section3 {
//height: 95vh;
background-color: #A59E8C;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 5vh;
background-color: #4D5061;
text-align: center;
padding:0;
right:0;
bottom:0;
left:0:
}
h1{
font-size: 14pt;
margin:0;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
</style>
3 answers
solution1
0 2017-03-14 22:50:37
To style the drop down without styling the main nav, give the drop down it's own class name. Then you can do
.navbar .navbar-default .customClassName{
...styles for just the drop down
}
solution2
0 2017-03-14 22:54:33
Your drop menu item text seems to be off center because of your padding. Your padding (3.5vh 8px 4px) gives a different top and bottom padding. Vh is taking the percentage of the screen size whereas 4px is a static amount. If you use the same padding on top and bottom, it should work (padding: 4px 8px) Like Hadas said, consider using classes to avoid breaking other parts of your site.
solution3
0 2017-03-14 23:17:05
.nav ul.dropdown-menu li a:hover {
background-color: rgba(238, 238, 238, 0.75);
}
To set an opacity for only the background color you'll have to write the background-color property on hover in terms of RGBA. Use a tool like http://hex2rgba.devoth.com/ to convert the current hex to RGBA with the opacity level and add the background-color property to the :hover state of the element.
Setting the opacity property directly will change the opacity of the text and content as well.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.