I work on a new website, and now I am styling the navbar
I have created a dropdown menu with hover but the menu does not take the list's height as I think so when I hover to the next list in the dropdown menu, the menu disappears.
* {
box-sizing: border-box
}
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
nav {
display: grid;
grid-template-columns: 5rem 1fr;
justify-items: center;
align-items: center;
background-color: #000000;
}
.logo h1 {
color: #FFF;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 5px;
}
.menu {
display: block;
position: relative;
}
.menu li {
color: #d3d3d3;
font-weight: 300;
text-transform: uppercase;
list-style: none;
display: inline-block;
}
.menu ul {
width: 100%;
height: 0;
opacity: 0;
position: absolute;
left: 0;
top: 35px;
background: #00f;
transition: all .5s ease;
}
.menu li:nth-of-type(4) {
height: 150%;
}
.menu>li>a {
display: block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
color: #d3d3d3;
}
.menu ul li {
display: block;
}
.menu li:hover ul {
height: 150%;
opacity: 1;
transform: translateY(0);
overflow: hidden;
}
<nav>
<div class="logo">
<!-- Logo -->
<h1>Hexa</h1>
</div>
<ul class="menu">
<!-- Nav Menu -->
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>
Parent Link
<ul>
<li>Child Link</li>
<li>Child Link</li>
<li>Child Link</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
I tried to change the parent list height and the menu inside it but still now working, do you have any idea about this?
Thank you all for help :D
I just added the z-index property to the menu and it is fixed
I work on a new website, and now I am styling the navbar
I have created a dropdown menu with hover but the menu does not take the list's height as I think so when I hover to the next list in the dropdown menu, the menu disappears.
* {
box-sizing: border-box
}
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
nav {
display: grid;
grid-template-columns: 5rem 1fr;
justify-items: center;
align-items: center;
background-color: #000000;
}
.logo h1 {
color: #FFF;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 5px;
}
.menu {
display: block;
position: relative;
}
.menu li {
color: #d3d3d3;
font-weight: 300;
text-transform: uppercase;
list-style: none;
display: inline-block;
}
.menu ul {
width: 100%;
height: 0;
opacity: 0;
position: absolute;
left: 0;
top: 35px;
background: #00f;
transition: all .5s ease;
}
.menu li:nth-of-type(4) {
height: 150%;
}
.menu>li>a {
display: block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
color: #d3d3d3;
}
.menu ul li {
display: block;
}
.menu li:nth-child(4):hover ul{
height: 150%;
padding: 15px 0px 15px 0px;
opacity: 1;
overflow: hidden;
}
.menu li:nth-child(4) ul{
width: 130px;
padding: 0px;
height: 0%;
opacity: 1;
transform: translateX(250px);
overflow: hidden;
}
.menu li:nth-child(4) ul li{
padding: 0px 12px 0px 12px;
}
.menu li:nth-child(4) ul li a{
color: #fff;
text-decoration: none;
}
<nav>
<div class="logo">
<!-- Logo -->
<h1>Hexa</h1>
</div>
<ul class="menu">
<!-- Nav Menu -->
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>
Parent Link
<ul>
<li>Child Link</li>
<li>Child Link</li>
<li>Child Link</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
Related
I am trying to create a horizontal navbar with a logo on the left and the menu items on the right of the navbar. I can find the basic setup for this, but what I cannot find is how to create sub menus off of some of the parent links :( here is what I have so far, I am kinda new - so please, if you can, be gentle k :)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: green;
}
header {
height: 100px;
background-color: white;
padding: 10px 0;
}
.menu-wrap {
display: flex;
justify-content: space-between;
padding: 0 15px;
}
.logo-img {
height: 79px;
}
.menu-icon {
font-size: 2.4em;
color: #ffffff;
line-height: 50px;
}
nav {
position: absolute;
background-color: #3D4852;
top: 70px;
left: 0;
width: 100%;
}
nav ul {
list-style-type: none;
}
nav ul li {
padding: 0 15px;
}
nav ul li a {
display: inline-block;
padding: 12px;
/* Add your custom styles below to change appearance of links */
color: black;
text-decoration: none;
letter-spacing: 0.05em;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
#checkbox {
display: none;
}
#checkbox:checked~nav ul {
max-height: 200px;
padding: 15px 0;
transition: all 0.5s;
}
#media (min-width: 768px) {
.menu-icon {
display: none;
}
nav {
position: relative;
top: -10px;
background-color: transparent;
}
nav ul {
max-height: 70px;
padding: 15px 0;
text-align: right;
}
nav ul li {
display: inline-flex;
padding-left: 20px;
}
<header class="menu">
<div class="menu-wrap">
<img src="logoHOLD.gif" class="logo-img" alt="Logo">
<input type="checkbox" id="checkbox">
<label for="checkbox"><i class="fa fa-bars menu-icon"></i></label>
<nav>
<ul>
<li>Home</li>
<li>Topics
<ul>
<li>Item One
<li>Item Two
<li>Item Three
</ul>
</li>
<li>Commentaries</li>
<li>Donate</li>
<li>Something</li>
</ul>
</nav>
</div>
</header>
What you'll need to do is assign a class or id to the parent ul that has the other ul you want to appear as a dropdown and give it a relative position. Then, give the child ul (the dropdown element) absolute positioning and play around with transform / top / opacity values. That's one way to do it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: green;
}
header {
height: 100px;
background-color: white;
padding: 10px 0;
}
.menu-wrap {
display: flex;
justify-content: space-between;
padding: 0 15px;
}
.logo-img {
height: 79px;
}
.menu-icon {
font-size: 2.4em;
color: #ffffff;
line-height: 50px;
}
nav {
position: absolute;
background-color: #3D4852;
top: 70px;
left: 0;
width: 100%;
}
nav ul {
list-style-type: none;
}
nav ul li {
padding: 0 15px;
}
nav ul li a {
display: inline-block;
padding: 12px;
/* Add your custom styles below to change appearance of links */
color: black;
text-decoration: none;
letter-spacing: 0.05em;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
#checkbox {
display: none;
}
#checkbox:checked~nav ul {
max-height: 200px;
padding: 15px 0;
transition: all 0.5s;
}
#media (min-width: 768px) {
.menu-icon {
display: none;
}
nav {
position: relative;
top: -10px;
background-color: transparent;
}
nav ul {
max-height: 70px;
padding: 15px 0;
text-align: right;
}
nav ul li {
display: inline-flex;
padding-left: 20px;
}
.dd-parent {
position: relative;
}
.dd-list {
position: absolute;
top: 25px;
left: 0;
width: 100%;
transform: scaleY(0);
opacity: 0;
transition: .3s all ease;
transform-origin: top;
}
.dd-list li {
text-align: left;
background: DarkOrchid;
color: white;
}
.dd-list li:not(:first-of-type) {
border-top: 2px solid black;
}
.dd-parent:hover > .dd-list {
transform: none;
opacity: 1;
}
<header class="menu">
<div class="menu-wrap">
<img src="logoHOLD.gif" class="logo-img" alt="Logo">
<input type="checkbox" id="checkbox">
<label for="checkbox"><i class="fa fa-bars menu-icon"></i></label>
<nav>
<ul>
<li>Home</li>
<li class="dd-parent">Topics
<ul class="dd-list">
<li>Item One
<li>Item Two
<li>Item Three
</ul>
</li>
<li>Commentaries</li>
<li>Donate</li>
<li>Something</li>
</ul>
</nav>
</div>
</header>
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>
I have a header that I would like to put a logo in the middle of. I don't want to use bootstrap unless there is no other choice. The logo appears to show in the centre of the navigation bar as I would like, however, the links do not go around it properly. Here is an example of what I want the navbar to look like in terms of positioning: ibb.co/zsGG9FY
#firstpage {
width: 100%;
height: 100%;
}
#firstpage ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
}
#firstpage li {
float: left;
}
#firstpage li a {
display: block;
color: white;
text-align: center;
padding: 33px 19px;
text-decoration: none;
font-family: Futura;
font-size: 11px;
}
#firstpage li a:hover {
color: #00CFFF;
}
#firstpage .active {
color: #00CFFF;
}
#firstpage .midlogo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#firstpage .midlogo img {
width: 100%;
height: 100%;
background-color: white;
<section id="firstpage">
<ul>
<li><a class="active" href="#firstpage">HOME</a></li>
<li>HOW IT WORKS</li>
<li>WHY CHOOSE US</li>
<li class="midlogo">
<img src="logo.png">
</li>
<li>GALLERY</li>
<li>SERVICES</li>
<li>CONTACT US</li>
</ul>
</section>
You have set float: left on <li> tag so it keeps on left position. This should be removed.
And using display: flex layout on ul tag, you can align all items on center.
Attached snippet shows what you need.
#firstpage {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
}
#firstpage ul {
display: flex;
justify-content: center;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
}
#firstpage li a {
display: block;
color: white;
text-align: center;
padding: 33px 19px;
text-decoration: none;
font-family: Futura;
font-size: 11px;
}
#firstpage li a:hover {
color: #00CFFF;
}
#firstpage .active {
color: #00CFFF;
}
#firstpage .midlogo img {
width: 100%;
height: 100%;
background-color: white;
}
<section id="firstpage">
<ul>
<li><a class="active" href="#firstpage">HOME</a></li>
<li>HOW IT WORKS</li>
<li>WHY CHOOSE US</li>
<li class="midlogo">
<img src="logo.png">
</li>
<li>GALLERY</li>
<li>SERVICES</li>
<li>CONTACT US</li>
</ul>
</section>
My solution uses Flexbox. I've replaced the image with an element with a dashed border so that it's obvious where it is. I've also but a pink background behind each link to show that they are indeed all the same width.
Each normal link has a width of 100% to force them to take up all available space. The logo has flex-shrink:0 so that it retains it's given size.
#firstpage ul {
list-style-type: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
}
#firstpage li {
width: 100%;
}
#firstpage li:nth-child(odd) {
background: pink;
}
#firstpage li a {
display: block;
text-align: center;
color: white;
padding: 33px 19px;
text-decoration: none;
font-family: Futura;
font-size: 11px;
}
#firstpage li a:hover {
color: #00CFFF;
}
#firstpage .active {
color: #00CFFF;
}
#firstpage .midlogo {
border: white dashed 3px;
width: 50px;
flex-shrink: 0;
height: 50px;
}
<section id="firstpage">
<ul>
<li><a class="active" href="#firstpage">HOME</a></li>
<li>HOW IT WORKS</li>
<li>WHY CHOOSE US</li>
<li class="midlogo">
</li>
<li>GALLERY</li>
<li>SERVICES</li>
<li>CONTACT US</li>
</ul>
</section>
I've removed the classes containing float: left for li items and position: absolute for .midlogo item respectively.
All you need is flex property inside ul item to adjust its 1 dimensional layout.
#firstpage {
width: 100%;
height: 100%;
}
#firstpage ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
/************ ADD FLEX DISPLAY ************/
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
#firstpage li a {
display: block;
color: white;
text-align: center;
padding: 33px 19px;
text-decoration: none;
font-family: Futura;
font-size: 11px;
}
#firstpage li a:hover {
color: #00CFFF;
}
#firstpage .active {
color: #00CFFF;
}
#firstpage .midlogo img {
width: 100%;
height: 100%;
background-color: white;
}
<section id="firstpage">
<ul>
<li><a class="active" href="#firstpage">HOME</a></li>
<li>HOW IT WORKS</li>
<li>WHY CHOOSE US</li>
<li class="midlogo">
<img src="logo.png">
</li>
<li>GALLERY</li>
<li>SERVICES</li>
<li>CONTACT US</li>
</ul>
</section>
You should read about the flex property- https://developer.mozilla.org/en-US/docs/Web/CSS/flex
Please can someone help, I've been at this for 2 days and just can't get it right! I'm trying to create a dropdown menu to adhere to my existing navbar. Here's my code below. I have it set that the navbar style changes for smaller windows/mobile and still need to figure that part out wrt the sub menu.. HELP :(
nav {
position: fixed;
width: 100%;
z-index: 10;
}
nav ul {
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #000;
padding: 0;
text-align: center;
margin: 0;
transition: 1s;
}
nav ul li {
display: inline-block;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 20px;
padding: 5px 5px;
}
nav ul li ul {
display: none;
}
nav ul li:hover ul {
display: block;
position: absolute;
}
nav.black ul {
background: rgba(255, 255, 255, 1);
color: #666;
}
nav.black ul li a {
text-decoration: none;
font-size: 20px;
transition: 1s;
filter: invert(50%);
}
.menu-icon {
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #00b4ff;
display: none;
}
#media(max-width: 900px) {
.nav-logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 45em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px 0;
text-align: center;
}
.menu-icon {
display: block;
}
}
<div class="nav-wrapper">
<nav>
<div class="menu-icon">
<i class=" fa fa-bars fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Courses
<ul>
<li>PADI Experiences</li>
<li>PADI Basic Courses</li>
<li>PADI Speciality Courses</li>
<li>PADI Pro</li>
</ul>
</li>
<li class="small-nav-logo"><a id="nav-africa" href ="index.html"><img src="img/logo-icon.gif" alt="Home" width="80" height="68"></a></li>
<li>Dives
<ul>
<li>Guided Packages</li>
</ul>
</li>
<li>Nature</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
Add this to your css.
nav ul li ul li{
display: block;
text-align: left;
margin: 20px 0px;
}
All you needed to do was target the li inside the li.
I'm trying to do a nav bar with a contact button stuck to the right of the page. I want contact to be aligned with the rest of the elements of the nav bar, however when I add float: right; it just disaligns my nav bar and it doesn't move contact to the right.
Here you can see my code: http://jsfiddle.net/LG2vR/19/
Can someone please tell me the proper way to accomplish this please?
Thanks!
Am not sure if this is what you need exactly, see the updated fiddle
http://jsfiddle.net/ov74xcyg/1/
Basically, i have used position absolute to move your last child of the navigation to the right side and increased width of the navigation till the end of the header.
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
z-index: 500;
box-sizing: content-box;
transition: .3s;
background: red;
}
nav.white {
background: white;
height: 35px;
padding: 10px 100px;
transition: .5s;
}
nav ul {
list-style: none;
float: left;
margin: 0;
padding: 0;
display: flex;
width: 90%;
position: relative;
}
nav ul li {
list-style: none;
}
nav ul li:last-child {
display: inline-block;
right: 5%;
position: absolute;
top: 0;
}
nav ul li a {
line-height: 80px;
color: #FFFFFF;
margin: 12px 30px;
text-decoration: none;
text-transform: capitalize;
transition: .5s;
padding: 10px 5px;
font-size: 16px;
}
nav ul li a:hover {
background-color: rgba(255,255,255,0.2);
}
nav.white ul li a {
color: #000;
line-height: 40px;
transition: .5s;
}
nav ul li a:focus {
outline: none;
}
<div class="wrapper">
<nav>
<ul>
<li>LOGO</li>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li><a class="contact" href="#">Contact</a></li>
</ul>
</nav>
Just add:
nav ul li a {
float: left;
}
right before:
nav ul li a.contact {
float: right;
}
or use flexbox!
.wrapper li {list-style-type: none;}
.wrapper {
overflow: hidden;
background-color: red;
}
.wrapper .logo{
margin-right : 30px;
}
.wrapper a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.wrapper a:hover {
background-color: #ddd;
color: black;
}
.wrapper a.active {
background-color: #4CAF50;
color: white;
}
.topnav-right {
float: right;
}
<div class="wrapper">
<a class="active logo" href="#">Logo</a>
Home
Page 1
Page 2
<div class="topnav-right">
<li><a class="contact" href="#">Contact</a></li>
</div>
</div>