I'm new to coding websites and currently doing an assignment.
My issue is that when mousing over my navigation bar, the hover color does not fully cover the entire item. How do I solve this? Is it occurring due to my logo?
My html code:
.navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(134, 35, 35);
font-family: Megrim, cursive;
font-weight: bold;
}
/* floats navigation buttons to the right */
.naviright {
float: right;
}
/*makes elements start from the left*/
.navigation li {
float: left;
}
.navigation li a {
display: block;
color: white;
text-align: center;
padding: 12px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
.navigation li a:hover:not(.active) {
background-color: #111;
}
.navigation li a:hover:active {
background-color: #4CAF50;
}
/*TopNav End*/
/*logo*/
#logo {
width: 40px;
height: 40px;
overflow: hidden;
padding-left: 20px;
padding-bottom: 5px;
padding-top: 2px;
}
#logoname {
color: rgb(255, 255, 255);
font-size: 20px;
}
<nav>
<ul class="navigation">
<li id="logo"><img src="images\logo.svg"></li>
<li id="logoname"><a>Stationery Haven</a></li>
<div class="naviright">
<li>Home</li>
<li>Categories</li>
<li>Feedback</li>
<li>Contact Us</li>
</div>`enter code here`
</ul>
</nav>
Add line-height to li a
.navigation li a {
display: block;
color: white;
text-align: center;
padding: 12px 16px;
text-decoration: none;
line-height:22px;
}
.navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(134, 35, 35);
font-family: Megrim, cursive;
font-weight: bold;
}
/* floats navigation buttons to the right */
.naviright {
float: right;
}
/*makes elements start from the left*/
.navigation li {
float: left;
}
.navigation li a {
display: block;
color: white;
text-align: center;
padding: 12px 16px;
text-decoration: none;
line-height:22px;
}
/* Change the link color to #111 (black) on hover */
.navigation li a:hover:not(.active) {
background-color: #111;
}
.navigation li a:hover:active {
background-color: #4CAF50;
}
/*TopNav End*/
/*logo*/
#logo {
width: 40px;
height: 40px;
overflow: hidden;
padding-left: 20px;
padding-bottom: 5px;
padding-top: 2px;
}
#logoname {
color: rgb(255, 255, 255);
font-size: 20px;
}
<nav>
<ul class="navigation">
<li id="logo"><img src="images\logo.svg"></li>
<li id="logoname"><a>Stationery Haven</a></li>
<div class="naviright">
<li>Home</li>
<li>Categories</li>
<li>Feedback</li>
<li>Contact Us</li>
</div>`enter code here`
</ul>
</nav>
OK I reviewed you code I think if you add or change following css code then it will be work for you:
#logo {
width: 40px;
height: 40px;
overflow: hidden;
padding-left: 20px;
padding-bottom: 4px; // Changed here 5px to 4px
padding-top: 2px;
}
.navigation li a {
display: block;
color: white;
text-align: center;
padding: 12px 16px;
line-height: 22px; // Logo test font-size: 20px; so this line need to be added
text-decoration: none;
}
1) You could solve this by increasing the size of
.naviright li a {font-size: 20px;}
2) or you could just give the line-height to -
.navigation li a {line-height: 22px;}
Here is the flex based solution I've tried Fiddle
Related
ul {
padding: 0;
margin: 0;
text-decoration: 0;
list-style: none;
background: #343434;
height: 20 px;
}
ul li a.home {
float: left;
color: white;
font-size: 24px;
line-height: 0px;
padding: 20px 100px;
margin: 0px 30px;
}
ul li a.home:hover {
background-color: white;
color: black;
transition: .5s;
}
ul {
list-style: none;
color: white;
}
ul li {
display: inline-block;
line-height: 80px;
}
.main ul {
display: none;
}
ul li a {
font-size: 18px;
color: white;
padding: 12px 100px;
border-radius: 2px;
}
a:hover {
text-decoration: none;
background: #A179C9;
color: black;
transition: .7s;
}
.main li:hover>ul {
display: block;
position: absolute;
}
<ul class="main">
<li><a class="home" href="index.html">blank</a></li>
<li>listen
<ul>
<li><a id="spotify" href="https://open.spotify.com/">spotify</a></li>
<li><a id="apple" href="https://open.spotify.com/">apple music</a></li>
</ul>
</li>
<li>gallery</li>
<li>download</li>
<li>store</li>
</ul>
The "spotify" and "apple music" block elements display in one line next to each other as opposed to below each other.
I also use bootstrap on the page. Not sure if it's got anything to do with the issue because when I remove the script it still works the same.
Sorry if my code is hard to see through.
It's the inline-block on ul li in your CSS. inline-block won't break the line. See MDN Inline Elements.
in css I marked my edits.
was it necessary?
ul {
padding: 0;
margin: 0;
text-decoration: 0;
list-style: none;
background: #343434;
height: 20 px;
}
ul li a.home {
float: left;
color: white;
font-size: 24px;
line-height: 0px;
padding: 20px 100px;
margin: 0px 30px;
}
ul li a.home:hover {
background-color: white;
color: black;
transition: .5s;
}
ul {
list-style: none;
color: white;
}
ul li {
display: inline-block;
line-height: 80px;
}
.main ul {
display: none;
flex-direction: column; /*add this it*/
position: absolute; /*add this it*/
}
ul li a {
font-size: 18px;
color: white;
padding: 12px 100px;
border-radius: 2px;
}
a:hover {
text-decoration: none;
background: #A179C9;
color: black;
transition: .7s;
}
.main li:hover>ul {
display: flex; /*add this it*/
position: absolute; /*add this it*/
}
<ul class="main">
<li><a class="home" href="index.html">blank</a></li>
<li>listen
<ul class="sub_main">
<li><a id="spotify" href="https://open.spotify.com/">spotify</a></li>
<li><a id="apple" href="https://open.spotify.com/">apple music</a></li>
</ul>
</li>
<li>gallery</li>
<li>download</li>
<li>store</li>
</ul>
Thanks for taking time to read this question! So one minute everything was fine and then I refreshed my code after making too many changes to go back through, and this happened:
drop down menu without color:
None of the color from the header transferred into the dropdown. How do I fix this? Here is my code:
<header id="sticky-header">
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<nav>
<ul>
<li>Home</li>
<li>Bio</li>
<li>Music</li>
<li>Shows</li>
<li>Media</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
header {
height: 67px;
background-color: #2b2b2b;
width: 100%;
position: fixed;
text-align: center;
}
nav ul {
margin-top: 13px;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin: 0.8em;
}
nav a {
font-weight: 800;
text-decoration: none;
text-transform: uppercase;
font-size: 0.95em;
padding: 0.5em;
color: #FFF;
}
nav a:hover,
nav a:focus {
color: #048575;
font-size: 1em;
}
label {
font-size: 2rem;
color: #FFF;
padding: 0.5em;
display: none;
width: 1em;
float: center;
}
#toggle {
display: none;
}
#media only screen and (max-width:650px) {
header {
padding-top: 0em;
padding-bottom: 0em;
background-color: #2b2b2b;
}
label {
display: block;
cursor: pointer;
}
nav li {
display: block;
display: none;
}
nav a {
display: block;
padding-top: 1em;
padding-bottom: 1em;
border-bottom: 1px solid black;
}
#toggle:checked + nav li {
display: block;
}
}
Sorry the formatting is a bit weird, copy and paste didn't quite work. Thanks for reading and if you can help, please do! (Other feedback is also appreciated).
I take it you want the black background applied to your header to be reflected in your dropdown menu? In this case, you'll need to apply the background to nav inside of your media query. Note that you'll also want to set a margin-top to bring your navbar up a bit to be 'flush' with your header:
nav {
background-color: #2b2b2b;
margin-top: -20px;
}
Which can be seen in the following:
header {
height: 67px;
background-color: #2b2b2b;
width: 100%;
position: fixed;
text-align: center;
}
nav ul {
margin-top: 13px;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin: 0.8em;
}
nav a {
font-weight: 800;
text-decoration: none;
text-transform: uppercase;
font-size: 0.95em;
padding: 0.5em;
color: #FFF;
}
nav a:hover,
nav a:focus {
color: #048575;
font-size: 1em;
}
label {
font-size: 2rem;
color: #FFF;
padding: 0.5em;
display: none;
width: 1em;
float: center;
}
#toggle {
display: none;
}
#media only screen and (max-width:650px) {
header {
padding-top: 0em;
padding-bottom: 0em;
background-color: #2b2b2b;
}
label {
display: block;
cursor: pointer;
}
nav {
background-color: #2b2b2b;
margin-top: -20px;
}
nav li {
display: block;
display: none;
}
nav a {
display: block;
padding-top: 1em;
padding-bottom: 1em;
border-bottom: 1px solid black;
}
#toggle:checked+nav li {
display: block;
}
}
<header id="sticky-header">
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<nav>
<ul>
<li>Home</li>
<li>Bio</li>
<li>Music</li>
<li>Shows</li>
<li>Media</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
I have horizontal menu bar, and I trying to add sub menu for one of item, but I am not able to add it, Its appending to my main menu, please someone help me to where i missing
thanks
HTML
<div id="talltabs-maroon">
<ul>
<li class="first">Home <span>Page</span></li>
<li class="active"><span>About us</span></li>
<li class="dropdown"><a class="dropbtn" href="#"> <span> Report </span></a>
<ul class="dropdown-content" style="left:0">
<li>
<a href="">
<p>Valve Report</p>
</a>
</li>
<li>
<a href="">
<p>Cylinder Report</p>
</a>
</li>
</ul>
</li>
<li class="last">Contact <span>Us</span></li>
</ul>
</div>
CSS for Main menu
#talltabs-maroon {
clear: left;
float: left;
padding: 0;
border-top: 3px solid #CD324F;
width: 100%;
overflow: hidden;
font-family: Georgia, serif;
height: 90px;
position: inherit;
}
#talltabs-maroon ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
position: relative;
left: 50%;
text-align: center;
}
#talltabs-maroon ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
#talltabs-maroon ul li a {
display: block;
float: left;
margin: 0 3px 0 0;
padding: 0px 10px 6px 10px;
background: #CD324F;
text-decoration: none;
color: #fff;
}
#talltabs-maroon ul li a p:hover {
color: aqua;
}
#talltabs-maroon ul li a:hover {
padding: 20px 10px 6px 10px;
color: black
}
#talltabs-maroon ul li.active a,
#talltabs-maroon ul li.active a:hover {
padding: 25px 10px 6px 10px;
border-width: 5px;
border-color: aqua;
color: aqua;
}
CSS for drop down menu i tried.
.dropbtn {
list-style-type: none;
color: white;
padding: 14px;
font-size: 14px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: block;
}
.dropdown-content {
list-style-type: none;
display: none;
position: absolute;
right: 0;
/*background-color: black;*/
background-image: url('../../Images/black-olive.jpg'); /*dropdowm popup*/
min-width: 160px;
box-shadow: 0px 8px 16px 5px rgba(0,0,0,0.2);
z-index: 1;
padding-right: 2px;
margin-right: 2px;
}
.dropdown-content a {
color: white;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
/*background-color: gray;*/
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
/*background-color: #3e8e41;*/
}
pleas help me.
thanks
tink.
Here is my answer for same example, I changed complete css,
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul li {
display: inline-block;
margin-right: -1px;
position: relative;
padding: 15px 20px;
background: #CD324F;
cursor: pointer;
color: black;
height: 40px;
width: auto;
text-align:center;
}
ul li a{
color:black;
}
ul li:hover {
background: #CD324F;
color: #fff;
height: 45px;
}
ul li a:hover {
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 68px;
left: 0;
width: 160px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #ce5068;
display: block;
color: #CD324F;
height: 35px;
}
ul li ul li:hover {
background: #CD324F;
height: 35px;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<div style="height: 77px; width:100%; margin-top:65px;text-align:center; border-top:solid; border-top-color:#CD324F">
<ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
Result: on hover portfolio, drop down will appear
Working example on JSFiddle.
I really recommend to look at bootstrap's drop down menu. It is easy to use and most things are already done for you. good luck
Here is the link: https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
your code is bit confusing , i have created a simple demo for you how to do it.
here is my HTML code
body {
background: #212121;
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
}
p {
text-align: center;
}
nav {
margin: 50px 0;
background-color: #E64A19;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px; /* the height of the main nav */
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>WordPress
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials</li>
</ul>
</li>
<li>Web Design
<!-- First Tier Drop Down -->
<ul>
<li>Resources</li>
<li>Links</li>
<li>Tutorials
</ul>
</nav>
</div>
I am trying to create a website using bootstrap and I have used bootstrap before. This time I am making a site with a fixed nav and the logo will be in the middle of the nav links. I also want the logo to be on top of the nav links.
This image will show what I am trying to do:
The code I have now is this:
html, body {
margin: 0;
padding: 0;
background: #fff;
color: #000;
font-size: 14px;
font-family: 'Helvetica', serif;
}
.navbar {
background: none;
border: none;
margin-top: 20px;
}
.container-fluid {
padding-left: 0px;
padding-right: 0px;
margin-left: -40px;
}
.navbar ul li {
display: block;
text-align: center;
float: left;
width: 20%;
}
.fourth-color {
background-color: #ffecec;
padding-top: 30px;
padding-bottom: 30px;
}
.third-color {
background-color: #122212;
padding-top: 30px;
padding-bottom: 30px;
}
.second-color {
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
}
.first-color {
background-color: #f25727;
padding-top: 30px;
padding-bottom: 30px;
}
<!-- Start of Nav Bar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<ul>
<li class="first-color">First</li>
<li class="second-color">Second</li>
<li>Logo</li>
<li class="third-color">Third</li>
<li class="fourth-color">Fourth</li>
</ul>
</div>
</nav>
When I try to link an image, it doesn't fit properly and screws with the whole nav bar. Any help is appreciated!
Your problem here is you only have padding on the li's that have classes. (which is why the anchor that says logo is not centered is because it doesn't have a class with padding)
ex.
.navbar ul li {
display: block;
text-align: center;
float: left;
width: 20%;
}
.fourth-color, .third-color, .second-color, .first-color {
padding-top: 30px;
padding-bottom: 30px;
}
Apply the padding to all the lists and you're problem is fixed.
.navbar ul li {
padding-top: 30px;
padding-bottom: 30px;
}
As for the middle logo. You have to use position relative and then add your additional styles to that either by class or in my case :nth-child as seen below.
#import url("http://fonts.googleapis.com/css?family=Raleway&subset=latin,latin-ext");
html, body {
margin: 0;
padding: 0;
background: #fff;
color: #000;
font-size: 14px;
font-family: 'Helvetica', serif;
}
.navbar {
margin-top: 1em;
text-align: center;
}
.navbar ul {
padding: 0;
text-decoration: none;
list-style: none;
}
.navbar li {
display: block;
float: left;
width: calc(20% - 1px - 0.906752000000002em);
padding: 1.16em 1em;
font: 100 21px "Raleway", sans-serif;
background: #000;
color: #fff;
opacity: 1;
transition: all 0.1s linear;
}
.navbar li:nth-child(1) {
background: #ff410e;
}
.navbar li:nth-child(2) {
background: #f4ca00;
}
.navbar li:nth-child(3) {
background: #fff;
color: #000;
border: 1px solid #000;
border-radius: 2.84em;
padding: 1.76em 0;
width: 20%;
position: relative;
margin: -0.64em -2.16em;
z-index: 1;
}
.navbar li:nth-child(3) a {
color: #000;
}
.navbar li:nth-child(4) {
background: #99d81b;
}
.navbar li:nth-child(5) {
background: #00abf3;
}
.navbar li:hover:not(:nth-child(3)) {
opacity: 0.7;
}
.navbar a {
color: #fff;
text-decoration: none;
}
.navbar .active {
text-decoration: underline;
}
<!-- Start of Nav Bar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<ul>
<li><a class="active" href="#">First</a></li>
<li>Second</li>
<li>Logo</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
</nav>
Unless you plan on creating a dropdown list I wouldn't recommend using a list for this menubar. Instead you can just style the anchors to fit your needs. (Remember to keep your code DRY):
[link]http://ramadaan.rocks/test.html?nocache=1
Somehow I broke my media query. Trying to make a nav and now when under 600px, the media query seems to not be working.
So where is the media query being broken? Is the nav too long? Too many list items?
Any help? Thanks,
.nav ul {
list-style: none;
background-color: #000;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Francois One', sans-serif;
font-size: 20px;
text-transform: uppercase;
line-height: 40px;
height: 40px; /* line-height and height set at same value centers the content vertically in the middle */
border-bottom: 1px solid #888;
color: #fff;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #e17143;
}
.nav a.active {
background-color: #fff;
color: #e17143;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 14px;
}
}
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
<div class="nav">
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>What Is Ramadan?</li>
<li>How Do I Fast?</li>
<li>Who Can Fast?</li>
<li>Prophetic Commentary</li>
<li>Tarawih Prayer</li>
<li>30 Ajza' of Qur'an</li>
<li>Commonly Asked Questions</li>
<li>Contact</li>
</ul>
</nav>