I am trying to make navigation bar. I am applying padding around nav iteams but it is falling out of its parent nav tag. How to deal with this kind of problem. Thanks
HTML
<header>
<div class="wrap">
<img src="logo.jpg">
<nav>
<ul>
<li>My Link 1</li>
<li>My Link 2</li>
<li>My Link 3</li>
<li>My Link 4</li>
</ul>
</nav>
</div>
</header>
CSS
#media screen and (max-width: 850px) {
* {
box-sizing: border-box;
}
.logo {
display: block;
}
nav {
background-color: aliceblue;
float: none;
display: block;
}
nav li {
/* padding: 5px; */
display: block;
width: 100%;
}
nav li a {
background-color: #999;
padding: 30px;
width: 100%;
height: 100%;
}
nav ul {
width: 100%;
}
}
add display block to anchor tag
Check fiddle
nav li a {
background-color: #999;
padding: 30px;
width: 100%;
height: 100%;
display: block;
}
I think what you're looking for is this:
#media screen and (max-width: 850px) {
* {
box-sizing: border-box;
}
.logo {
display: block;
}
nav {
background-color: aliceblue;
float: none;
display: block;
overflow: hidden;
}
nav ul {
margin: 0;
padding: 0;
}
nav li {
list-style: none;
float: left;
}
nav li a {
background-color: #999;
padding: 30px;
display: block;
}
nav ul {
width: 100%;
}
}
<header>
<div class="wrap">
<img src="logo.jpg">
<nav>
<ul>
<li>My Link 1</li>
<li>My Link 2</li>
<li>My Link 3</li>
<li>My Link 4</li>
</ul>
</nav>
</div>
</header>
Related
This question already has answers here:
Dropdown menu is hidden behind my hero image
(1 answer)
Drop down menu appearing behind images
(2 answers)
Closed 4 months ago.
My dropdown is hidden behind the image. I gave the dropdown a higher z-index but it didn't work. I'm a foundation students and I'm new to coding. Can anyone also help me to improve my code?
div.topnav-container nav ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
div.topnav-container nav ul>li {
float: left;
width: 200px;
height: 25x;
font-size: 20px;
background-color: lightgrey;
}
div.topnav-container nav ul li a {
display: block;
text-decoration: none;
color: white;
}
div.topnav-container nav ul li:hover {
background-color: red;
}
div.topnav-container nav ul>li>a:hover {
background-color: red;
}
div.topnav-container nav ul>li>ul>li {
display: none;
}
div.topnav-container nav ul>li:hover>ul>li {
display: block;
}
article {
clear: left;
}
.topnav-container {
background-color: lightgrey;
height: 25px;
text-align: center;
}
div.topnav-container nav ul>li>ul>li {
padding-top: 10px;
padding-bottom: 10px;
z-index: 1;
}
.topnav {
color: white;
}
<header>
<div class="topnav-container">
<nav>
<ul class="topnav">
<li>Home</li>
<li>About us</li>
<li>Feedback</li>
<li>Basketball
<ul>
<li>History</li>
<li>Rules and Regulation</li>
<li>Legend Players</li>
</ul>
</li>
<li>Badminton
<ul>
<li>History</li>
<li>Rules and Regulation</li>
<li>Legend Players</li>
</ul>
</li>
<li>Football
<ul>
<li>History</li>
<li>Rules and Regulation</li>
<li>Legend Players</li>
</ul>
</li>
</ul>
</nav>
</div>
<figure>
<img src="https://via.placeholder.com/100" alt="People playing basketball" title="nba">
</figure>
</header>
Below I have a hidden <ul> which appears when the <li> 'More' is hovered over.
Due to the margin of the <li>, the <ul> dissapears when hovering between 'Extras' and the <ul> - how do I prevent this from happening?
#container ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#container li {
color: #fff;
width: 80px;
height: 60px;
float: left;
line-height: 60px;
margin: 10px;
background: black;
}
#container li a {
display: block;
}
.extras:hover > ul.hidden {
display: block;
}
ul.hidden {
display: none;
}
<div id="container">
<div class="center" style="text-align: center; display: inline-block;">
<nav>
<ul class="nav">
<li>Example 1</li>
<li>Example 2</li>
<li class="extras">More
<ul class="hidden">
<li>Hoverable</li>
<li>Hoverable</li>
<li>Hoverable</li>
</ul>
</li>
<li>Example 3</li>
<li>Example 4</li>
</ul>
</nav>
</div>
</div>
Your ul tag is not getting height. Here try this
#container ul {
list-style: none;
margin: 0px;
padding: 0px;
float:left;
width:100%;
}
#container li {
color: #fff;
width: 80px;
height: 60px;
float: left;
line-height: 60px;
margin: 10px;
background: black;
}
#container li a {
display: block;
}
.extras:hover > ul.hidden {
display: block;
}
ul.hidden {
display: none;
}
<div id="container">
<div class="center" style="text-align: center; display: inline-block;">
<nav>
<ul class="nav">
<li>Example 1</li>
<li>Example 2</li>
<li class="extras">More
<ul class="hidden">
<li>Hoverable</li>
<li>Hoverable</li>
<li>Hoverable</li>
</ul>
</li>
<li>Example 3</li>
<li>Example 4</li>
</ul>
</nav>
</div>
</div>
Where you use float always remember to set layout of parent.
#container .center {
display: inline-block;
vertical-align: top;
text-align: center;
}
#container ul {
list-style: none;
padding: 0;
margin: 0;
}
#container .nav:after {
display: block;
content: '';
clear: both;
}
#container .nav > li {
margin: 10px;
float: left;
}
#container ul li {
position: relative;
line-height: 60px;
background: black;
cursor: pointer;
height: 60px;
color: #fff;
width: 80px;
}
#container ul li ul {
position: absolute;
top: 100%;
left: 0;
}
#container ul ul li {
margin-top: 10px;
}
#container ul li a {
display: block;
}
.extras:hover > ul.hidden {
display: block;
}
ul.hidden {
display: none;
}
<div id="container">
<div class="center">
<nav>
<ul class="nav">
<li>Example 1</li>
<li>Example 2</li>
<li class="extras">More
<ul class="hidden">
<li>Hoverable</li>
<li>Hoverable</li>
<li>Hoverable</li>
</ul>
</li>
<li>Example 3</li>
<li>Example 4</li>
</ul>
</nav>
</div>
</div>
I'm trying to create a basic drop down menu. I'm having issues with the alignment. How can I get sub menu items to be directly underneath one another? For example, I am trying to get twitter, instagram, and facebook underneath "Social".
Thanks.
https://jsfiddle.net/xalxnder/ostaqgyk/
HTML
<body>
<ul class="main-nav">
<li>Home</li>
<li>Projects</li>
<li class="dropdown">
Social
<ul class="sub">
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</li>
</ul>
</body>
CSS
body {
background: #000000;
color: white;
}
.main-nav {
float: left;
}
.main-nav li {
font-size: 10px;
display: inline;
padding-right: 10px;
}
.main-nav .sub {
color: pink;
float: none;
z-index: -200;
}
//** .sub{display: none;
}
.dropdown:hover > .sub {
display: block;
position: absolute;
}
Here's the basics of it.
JSFiddle
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: black;
}
ul {
list-style-type: none;
color: white;
}
.main-nav >li {
display: inline-block;
position: relative;
padding-right: 10px;
}
.sub {
position: absolute;
top: 100%;
left: 0;
color: pink;
/* display:none */ /* disabled for demo */
}
.dropdown:hover .sub {
display:block;
}
<ul class="main-nav">
<li>Home</li>
<li>Projects</li>
<li class="dropdown">
Social
<ul class="sub">
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</li>
</ul>
Since block-level elements take up their own line, this rule should hold you:
.sub li {
display: block;
}
Add to .main-nav .sub:
position: absolute;
padding: 0;
body {
background: #000000;
color: white;
}
.main-nav {
float: left;
}
.main-nav li {
font-size: 10px;
display: inline-block;
padding-right: 10px;
}
.main-nav .sub {
position: absolute;
padding: 0;
color: pink;
float: none;
z-index: -200;
}
.sub li {
display: block;
}
<body>
<ul class="main-nav">
<li>Home</li>
<li>Projects</li>
<li class="dropdown">
Social
<ul class="sub">
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</li>
</ul>
</body>
I've been trying to create a navigation bar which consists of three pieces, a list to the left of the centered logo, the logo itself and a list to the right of the logo. I've tried absolutely positioning the logo and floating the lists however this leads to the logo overlaying the lists when the width of the browser is altered.
Any suggestions would be much appreciated, JSFiddle included below :-).
JSFiddle
HTML
<div class="navigation">
<div class="container-1020">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
<li>Blog</li>
</ul>
<div class="nav-logo">
<img src="http://placehold.it/200x60"/>
</div>
<ul>
<li>01234 123456</li>
</ul>
</div>
</div>
CSS
.navigation {
background: #222222;
}
.container-1020 {
max-width: 1020px;
min-width: 500px;
margin: 0 auto;
}
ul {
color: #fff;
margin: 0;
list-style-type: none;
}
li {
display: inline;
margin-right: 10px;
}
li:last-child {
margin-right: 0 !important;
}
.logo-container {
width: 200px;
height: 60px;
}
This might work for youFIDDLE
css:
* {
margin: 0;
}
a {
color: #ffffff;
text-decoration: none;
}
.navigation {
background: #222222;
}
.container-1020 {
max-width: 1020px;
min-width: 500px;
margin: 0 auto;
}
ul {
color: #fff;
list-style-type: none;
display: inline-block;
width: 30%;
}
ul:last-child {
text-align: right;
}
.nav-logo {
display: inline-block;
width: 30%;
}
html:
<div class="navigation">
<div class="container-1020">
<ul class="left">
<li>Home
</li>
<li>Work
</li>
<li>Contact
</li>
<li>Blog
</li>
</ul>
<div class="nav-logo">
<img src="http://placehold.it/200x60" />
</div>
<ul class="right">
<li>01234 123456</li>
</ul>
</div>
</div>
well for one, correct your class name for the logo, is it .nav-logo or .logo-container
then set your ul's and whichever logo container class you decide on to display:inline-block
I am trying to figure out why the third level of my drop down menu is not stretching to the width of the text that is contained within it. So far the text just automatically indents to the next line but all the other li's do not do this and are on a single line. Can someone help me find out why this is happening? Thank you!
here is the example I have made so far: http://themedwebdesign.com/salmon/
here is the html
<header>
<div class="container clearfix">
<div id="logo"><img src="./img/salmon-logo.png" alt=""></div>
<nav>
<ul>
<li>Home</li>
<li>Pages
<ul>
<li>About</li>
<li>Services</li>
<li>Meet the Team</li>
</ul>
</li>
<li>Features
<ul>
<li>Feature</li>
<li>Level 3
<ul>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio
<li>Blog
<ul>
<li>Single</li>
<li>Large</li>
<li>Medium</li>
<li>Small</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
and here is the css, I apologize its made using sass. If the compiled css file is needed then I will post it.
nav {
float: right;
ul {
list-style: none;
position: relative;
display: inline-block;
margin: 0;
li {
float: left;
text-transform: uppercase;
font-weight: 300;
a {
text-decoration: none;
color: inherit;
padding: 15px 25px;
display: block;
}
&:hover {
color: $colorSite;
}
&:hover > ul {
display: block;
}
}
&:after {
content: "";
clear: both;
display: block;
}
ul {
position: absolute;
top: 100%;
display: none;
padding: 0;
margin: 0;
border: 1px solid $colorSite;
li {
float: none;
position: relative;
a {
color: $colorDark;
text-decoration: none;
display: block;
padding: 15px 25px;
background-color: #fff;
&:hover {
color: #fff;
background-color: $colorSite;
}
}
}
ul {
position: absolute;
left: 100%;
top: 0;
}
}
}
}
If you want to stretch and don't want the 2nd line, you can simply do this in your css
header nav ul ul li a { white-space: nowrap; }
Just make width: 100%; under css header nav ul ul ul
white-space: nowrap; will prevent the text from wrapping.
header nav ul ul li {
float: none;
position: relative;
white-space: nowrap;
}