I am having a hard time on how to re-arrange my HTML/CSS code in order to move a few links inside of a hamburger nav menu.
I would like to have 'home' always visible but then, I would like the other linked pages to fall inside the hamburger menu, only visible when clicking the menu...
I would like the following to be inside the hamburger menu:
About
Contact
Portfolio ,etc.
Any suggestions on how to achieve this?
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100px;
display: table-cell;
}
.header-logo img {
height:100px;
padding: 10px 0px 10px 10px;
float: left;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
padding-top: 30px;
}
header nav ul li {
display: inline-block;
padding: 0 5px;
}
header nav ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.sub {
display: none;
background-color: rgb(70, 149, 223);
margin-left: 5%;
height: auto;
}
/* HAMBURGER MENU */
.nav div {
height: 4px;
background-color: rgb(20, 15, 15);
margin: 5px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30;
display: block;
float: right;
margin: 1em 0 0 1em;
padding-right: 10px;
}
.one {
width: 30px;
}
.two {
width: 20px;
}
.three {
width: 25px;
}
.nav:hover div{
width: 30px;
}
ul li a:hover {
color: rgb(255, 255, 255);
}
<header>
<div class="header-logo">
<img src="img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
<ul> <li>Home</li></ul>
<ul>
<a href="#" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
<div class="sub">
<li>Subscribe</li>
</div>
</a>
</ul>
</nav>
</header>
What you are looking for is called toggle. For this you need to use javascript or jquery (a simplified javascript "version"). To easy explain this, put for example a parent div for the child elements you want to toggle. Then in your css display this parent div none. Then you use jquery to be able to tell what you want to be clickable and then later what you want to toggle.
//Script.js
$(document).ready(function(){ //Use ready to make a function available after the document is loaded
$(".nav").click(function(){
$("#hamburger").toggle(250);
});
});
/* Style.css */
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100px;
display: table-cell;
}
.header-logo img {
height:100px;
padding: 10px 0px 10px 10px;
float: left;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
padding-top: 30px;
}
header nav ul li {
display: inline-block;
padding: 0 5px;
}
header nav ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.sub {
display: none;
background-color: rgb(70, 149, 223);
margin-left: 5%;
height: auto;
}
/* HAMBURGER MENU */
.nav div {
height: 4px;
background-color: rgb(20, 15, 15);
margin: 5px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30;
display: block;
float: right;
margin: 1em 0 0 1em;
padding-right: 10px;
}
.one {
width: 30px;
}
.two {
width: 20px;
}
.three {
width: 25px;
}
.nav:hover div{
width: 30px;
}
#hamburger{
display:none;
}
ul li a:hover {
color: rgb(255, 255, 255);
}
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type = "text/javascript" src = "script.js">
</head>
<header>
<div class="header-logo">
<img src="https://milestonehackers.com/img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
<ul> <li>Home</li></ul>
<ul>
<a href="#" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div id = "hamburger">
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
</div>
<div class="sub">
<li>Subscribe</li>
</div>
</a>
</ul>
</nav>
</header>
Edit: I added the src to the new script.js file which should contain your click function:)
Don't think you could achieve what you want only using CSS, maybe with a lot of CSS "hacks". I'd suggest adding some javascript to show on click.
I'd recommend checking this page https://www.w3schools.com/howto/howto_js_mobile_navbar.asp since they have an example just like the one you trying to achieve.
Related
My navigation bar cannot click any item except the last item. I have checked and follow the tutorial from youtube but unfortunately I checked code is same but not working at all please anyone got solution please share to me.
Here's My html
<html>
<title>UIA | Homepage</title>
<link href="Homepage.css" rel="stylesheet" type="text/css">
<header>
<div class="row">
<div class="logo">
<img src = "Logo.png">
</div>
<ul class="main-nav">
<li class = "active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
And here's my CSS.
*{
margin: 0;
padding: 0;
}
header{
background-image:
linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(Homepage.jpg);
height:100vh;
background-position:center;
background-size: cover;
}
.main-nav{
float: right;
list-style: None;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a{
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img{
width: 150px;
height: auto;
margin-top:10px;
float: left;
}
.row{
max-width: 1200px;
margin: auto;
}
.title{
position:absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1{
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
So did I miss out something please advice me Thank you.
.title is overlapping the menu.
You can give the menu a higher z-index to ensure it is on top.
Information about z-index
updated code below
* {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(Homepage.jpg);
height: 100vh;
background-position: center;
background-size: cover;
}
.main-nav {
float: right;
list-style: None;
margin-top: 30px;
/* added */
position: relative;
z-index: 100;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
margin-top: 10px;
float: left;
}
.row {
max-width: 1200px;
margin: auto;
}
.title {
position: absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1 {
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
<header>
<div class="row">
<div class="logo">
<img src="Logo.png">
</div>
<ul class="main-nav">
<li class="active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
It is because you do not use clearfix on your floated element parent(similar issues will occur on all floated stuff if you don't use clearfix).
Add this to your css file:
.clearfix:after {
content: "";
display: table;
clear: both;
}
And add clearfix to parent of floated element, in this case to:
<div class="row clearfix">
I recommend reading these two(will come in handy in the future):
https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/clear-fix/
Just in case, here is a link to jsfiddle with solution to your issue: https://jsfiddle.net/mwgjycv4/1/
So i'm currently working on building my own website but ran into some trouble when it came to centering my actual ul within my navigation bar. The nav bar is already centered and fine but i am trying to center the actual ul and still keep it left aligned. I am using Brackets text editor. Any Help ?
Thanks in advance and heres my CSS code:
body {
background-color: #333333;
margin: 100 0;
}
.mainimg {
border-style: solid;
width: 80%;
margin: 10 auto;
}
.mainimg img {}
.nav-bar {
text-align: center;
width: 85%;
margin: 0 auto;
}
.nav-bar ul {
width: 100%;
list-style-type: none;
margin: 0 auto;
padding: 0 auto;
overflow: hidden;
background-color: #333333;
}
.nav-bar li {
float: left;
width: 10%;
}
.nav-bar li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.nav-bar li a:hover {
background-color: #111111;
}
<html>
<head>
<title>Satori</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="imageslider">
<img src="images/SATORI%20ARROW%20LEFT.png" width=100px alt="left">
<img class="mainimg" src="images/satori-for-web-background.png" alt="oauihgoiw">
<img src="images/SATORI%20ARROW%20RIGHT.png" width=100px alt="right">
</div>
<div class="nav-bar">
<ul>
<li>Station</li>
<li>Search</li>
<li>Shop</li>
<li>Films</li>
<li>Art</li>
<li>Podcast</li>
<li>Blog</li>
<li>Games</li>
<li>Music</li>
</ul>
</div>
</body>
</html>
Update below css part
.nav-bar li {
display:inline-flex; /* OR display:inline-block */
/* float:left; */
/* width: 10%; */
}
body {
background-color: #333333;
margin: 100 0;
}
.mainimg {
border-style: solid;
width: 80%;
margin: 10 auto;
}
.mainimg img {}
.nav-bar {
text-align: center;
width: 85%;
margin: 0 auto;
}
.nav-bar ul {
width: 100%;
list-style-type: none;
margin: 0 auto;
padding: 0 auto;
overflow: hidden;
background-color: #333333;
}
.nav-bar li {
display:inline-flex; /* OR display:inline-block */
/* float:left; */
/* width: 10%; */
}
.nav-bar li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.nav-bar li a:hover {
background-color: #111111;
}
<div class="imageslider">
<img src="images/SATORI%20ARROW%20LEFT.png" width=100px alt="left">
<img class="mainimg" src="images/satori-for-web-background.png" alt="oauihgoiw">
<img src="images/SATORI%20ARROW%20RIGHT.png" width=100px alt="right">
</div>
<div class="nav-bar">
<ul>
<li>Station</li>
<li>Search</li>
<li>Shop</li>
<li>Films</li>
<li>Art</li>
<li>Podcast</li>
<li>Blog</li>
<li>Games</li>
<li>Music</li>
</ul>
</div>
Please help, I need the white space on the right bar gone and the position of the main content placed at the middle of the page.
What should I do? Any suggestion?
This is my site : http://www.plebonline.co.uk
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 18px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #ea730b;
}
.clock {
color: white;
text-align: center;
padding: 16px 18px;
display: block;
}
.leftbar {
float: left;
background-color: #333;
width: 10%;
margin: 0;
padding: 1em;
margin-bottom: -5000px;
padding-bottom: 5000px;
overflow: hidden;
}
.rightbar {
float: right;
background-color: #333;
width: 10%;
margin: 0;
padding: 1em;
margin-bottom: -5000px;
padding-bottom: 5000px;
overflow: hidden;
}
.maincontent {
padding: 0;
float:left;
margin-left: 10%;
margin-right: 10%;
background-color: #ff00ff;
width: 80%;
}
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Projects</li>
<li>Notes</li>
<li>About</li>
<li>Contact</li>
<li style="float:right" class="clock" id="clock"></li>
<script>
var today = new Date();
document.getElementById('clock').innerHTML=today;
</script>
</ul>
<div class="leftbar"></div>
<div class="maincontent"></div>
<div class="rightbar"></div>
There is a div tag close without opening that may be causing the problem.
Change:
<div class="leftbar"></div>
<div class="maincontent"></div>
</div>
<div class="rightbar"></div>
To:
<div class="leftbar"></div>
<div class="maincontent"></div>
<div class="rightbar"></div>
I notice that you didn't put your rightbar and leftbar in any div. In my code here, I remove the right and left bar. You can adjust the code if you want them back.
It's better to add some container to hold all of your element. As you notice the header and the maincontent is inside the div class .container.
Hope this help.
html,body {
margin:0;
padding:0;
height: 100%;
/*
* The container which hold the header and the main content
*/
.container {
width:100%;
position: absolute;
height:1200px;
background:#333;
}
/*
* Header which contain your menu and date
*/
.header {
width:100%;
}
/*
* The main content of your site
*/
.maincontent {
width:80%;
max-width:1000px;
background-color: #fff;
float:left;
left:50%;
height:100%;
margin-left:-500px;
position: absolute;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 18px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #ea730b;
}
.clock {
color: white;
text-align: center;
padding: 16px 18px;
display: block;
}
</style>
<body>
<div class="container">
<div class="header">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Projects</li>
<li>Notes</li>
<li>About</li>
<li>Contact</li>
<li style="float:right" class="clock" id="clock"></li>
<script>
var today = new Date();
document.getElementById('clock').innerHTML=today;
</script>
</ul>
</div>
<div class="container">
<div class="maincontent">
<h1>This is the content</h1>
</div>
</div>
</body>
I've been following this video online on how to create dropdown menu using css. I followed it and there's no any signs of a dropdown menu on my website. It's so frustrating because i want to get over with it so i can focus now on backend dev. Hope you guys can figure this one out.
Code for html:
<!DOCTYPE>
<html lang="en">
<head>
<title>MUSIC STORE</title>
<script src="js/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="jquery.bxslider.css"/>
<link rel="stylesheet" href="styles.css"/>
<link rel="shortcut icon" type="image/png" href="../Music Store/img/rockSign.png"/>
</head>
<body>
<div id="wrapper">
<header id="main_header">
<div id="callout">
<h2>☎ 111222333</h2>
<p>Michigan State Kawasaki Iceland</p>
</div>
<h1>MUSIC STORE</h1>
</header>
<div class="clearfix"></div>
<nav id="nav_menu">
<ul id="nav">
<li>HOME</li>
<li>INSTRUMENTS
<ul class="sub-menu">
<li>ELECTRIC GUITARS</li>
<li>BASS GUITARS</li>
<li>DRUMS</li>
</ul>
</li>
<li>AMPLIFIERS</li>
<li>ACCESSORIES</li>
<li>FEATURED ARTISTS</li>
</ul>
</nav>
<script src="js/jquery.bxslider.min.js"></script><!--For Image Slider-->
<div class="slide-wrap">
<div class="slider">
<ul class="slider1">
<li><img src="../Music Store/img/ibanez.jpg"/></li>
<li><img src="../Music Store/img/raven.jpg"/></li>
<li><img src="../Music Store/img/metallica.jpg"/></li>
</ul>
</div>
</div>
<script type="text/javascript">
$('.slider1').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
});
$('.slider2').bxSlider({
pager:false,
captions: true,
maxSlides: 3,
minSlides: 1,
slideWidth: 230,
slideMargin: 10
});
$('.slider3').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
controls:false,
});
</script>
<section class="one-third">
<div class="border_section">
<h3>NEW BASS AMPS THIS YEAR</h3>
<img src="../Music Store/img/fender_amps_bassbreaker.jpg"/>
<p>We would like to proudly announce the new shipment of fender bass amps that you all have been
waiting for. It will provide you that rich rock and roll tone like no other. Please check
out our bass amp section for more details.</p>
</div>
</section>
<section class="one-third">
<div class="border_section">
<h3>NEW FEATURE ARTIST</h3>
<img src="../Music Store/img/feature_markHolcomb.jpg"/>
<p>Behold Mark Holcomb from Periphery is in the house! Check out his info and new signature guitar
at our feature artists section. He will also be having a 20-minute guitar clinic on Oct 8 2016 right
here at Music Store.</p>
</div>
</section>
<section class="one-third">
<div class="border_section">
<h3>ATTENTION VOCALISTS!</h3>
<img src="../Music Store/img/GoMic.jpg"/>
<p>Check out the new Samson Go Mic Connect. It has a top-notch noise cancellation feature that can
definitely minimize the annoying sound that your dog makes while your recording. For more details,
Go to Accessories section.</p>
</div>
</section>
<div class="clearfix"></div>
<footer>
<p>©All Rights Reserved</p>
</footer>
</div>
</body>
</html>
Code for CSS:
#import url(http://fonts.googleapis.com/css?family=Black+Ops+One:400,700); /*--- Header --*/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); /*--- Navigation --*/
*
{
margin: 0;
border: 0;
padding: 0;
}
body
{
background-image: url('../Music Store/img/background.png');
background-repeat: repeat-x;
}
.clearfix
{
clear:both;
}
#wrapper
{
margin: 0 auto;
max-width: 1120px;
overflow: auto;
border: 1px solid black;
}
#main_header
{
width: 100%;
font-family: 'Black Ops One', sans-serif;
background-color: black;
border: 1px solid black;
color: white;
}
#main_header h1
{
float: left;
font-size: 380%;
margin: -10% 0 0 2%;
}
#callout
{
margin: 50px 20px 0 0;
}
#callout h2{
text-align: right;
color: white;
}
#callout p{
text-align: right;
padding: 0%;
color: grey;
font-size: 20px;
margin-bottom: 3px;
}
#nav_menu
{
width: 100%;
height: 10%;
background-color: white;
}
#nav_menu li
{
display: inline-block;
margin: 20px 20px 20px 63px;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bold;
}
#nav_menu li a
{
text-decoration: none;
color: black;
}
#nav_menu li a:hover
{
color: grey;
}
.sub-menu
{
position: absolute;
background-color: black;
list-style-type: none;
width: 124px;
padding-left: 0px;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
.sub-menu li
{
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
#nav_menu li:hover .submenu
{
opacity: 1;
}
.sub-menu li:hover
{
color: green;
background-color: yellow;
}
/*--- Start Image Slider --*/
.slider{
max-width: 1120px;
box-shadow: 1% 2% 5% 0 rgba(0, 0, 0, 0.07);
}
.slider1 img{
width: 100%;
margin: 0 auto;
}
.slider .bx-wrapper .bx-controls-direction a{
outline: 0 none;
position: absolute;
text-indent: -9999px;
top: 40%;
height: 71px;
width: 40px;
z-index: -1;
transition: all 0.7s;
}
.slider .bx-wrapper:hover .bx-controls-direction a{
z-index: 5;
}
.slider .bx-wrapper .bx-prev{
background: url("../Music Store/img/arrow_left.png") no-repeat 7px 9px;
left: 0px;
}
.slider .bx-wrapper .bx-prev:hover{
background: url("../Music Store/img/arrow_left.png") no-repeat 8px 15px;
}
.slider .bx-wrapper .bx-next{
background: url("../Music Store/img/arrow_right.png") no-repeat 10px 12px;
right: 0px;
}
.slider .bx-wrapper .bx-next:hover{
background: url("../Music Store/img/arrow_right.png") no-repeat 10px 17px;
}
/*--- End Image Slider --*/
.one-third img{
text-align: center;
max-width: 100%;
height: auto;
opacity: 0.9;
}
.border_section p{
font-family: 'Lato', sans-serif;
padding: 2%;
color: white;
text-align: justify;
}
.border_section h3
{
font-family: 'Open Sans', sans-serif;
text-align: center;
color: white;
text-transform: uppercase;
letter-spacing: 1%;
}
.border_section
{
border: 1px solid black;
background-color: black;
}
.one-third{
width: 27.35%;
float: left;
margin: 2% 0 3% 4.5%;
text-align: center;
background-color: white;
}
footer{
font-family: 'Open Sans', sans-serif;
font-weight: bold;
text-align: center;
width: 100%;
height: 6%;
background-color: black;
overflow: auto;
}
footer p
{
margin-top: 1%;
color: white;
}
Add this to your CSS :
It will help you to have the result you want. Of course there are still adaptations to do regarding your preferences.
/* Without this line, the submenu elements are black on black background */
#nav_menu .sub-menu li a {
color: #fff;
}
/* With this line you will remove the opacity:0; of the submenu when you hover the parent li */
#nav_menu li:hover .sub-menu {
opacity: 1;
}
/* Don't set a width so you have a better output */
#nav_menu li .sub-menu {
width: auto;
}
/* This lines make the submenu li dislay verticaly and not inline */
#nav_menu li .sub-menu li {
display: block;
}
Edit:
Instead of changing the opacity property to show/hide the submenu, you should use the display property.
Currently, the submenu is just transparent, but always opened. If your menu were bigger in height, you could open it by hovering the mouse on the slide at the location where it is when opened.
By using the display property, you're actually hiding it, and it will be opened only if you hover the menu element (as it should be).
To do this, you have to replace the opacity: 0; in your .sub-menu class by : display: none;
Then change the code opacity: 1; in the #nav_menu li:hover .sub-menu by : display: block; (in the code I gave you before).
It will be cleaner than handling it with the opacity.
Sorry for repeating this question similar to SO here: Can I create a div with a Curved bottom?
But method there does not fulfill my customization need of header.
But what i want to achieve is not quite similar to what i've achieve with the border border-bottom-left-radius and border-bottom-right-radius.
As you can see the images that header i want to achieve is linearly curved throughout the bottom but with what i've achieved is that i'm having more curvy border at the left and right portion of header and curved is not linear throughout the bottom. It becomes straight after short distance. I've tried to increase the %age but it becomes even more curved at edges.
Is there any other way of doing this so that i get linearly curved throughout the bottom?
Here is my code:
CSS Code:
header{
background-color: #000;
border-bottom-left-radius:25%;
border-bottom-right-radius:25%;
padding: 10px;
opacity: 0.35;
position: fixed;
width: 100%;
z-index: 1000;
}
Here is the link JSfiddle link: https://jsfiddle.net/ozqneuha/
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
/* --Global CSS-- */
.header-container {
margin: 0 auto;
width: 1170px;
}
ul {
padding: 0;
margin: 0;
}
/* Header CSS*/
header {
background-color: #000;
border-bottom-left-radius: 25%;
border-bottom-right-radius: 25%;
padding: 10px;
opacity: 0.35;
position: fixed;
width: 100%;
z-index: 1000;
}
header nav ul {
list-style-type: none;
}
header .logo {
display: inline-block;
}
header .header-nav {
display: inline-block;
float: right;
padding: 7px;
}
header li {
float: left;
margin-left: 20px;
}
header li a {
color: #fff;
font: 600 16px'Open Sans';
text-transform: uppercase;
text-decoration: none;
}
header li a:hover,
header li a:active {
color: #e51937;
text-decoration: none;
}
<header>
<div class="header-container">
<div class="logo">
<a href="#">
<img src="http://i.imgur.com/2JbjOqY.png" alt="logo">
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li>Search
</li>
<li>Map
</li>
<li>Properties
</li>
<li>Parking
</li>
<li>Residents
</li>
<li>Pay Online
</li>
</ul>
</nav>
</div>
<!-- /.header-nav -->
</div>
<!-- /.header-container -->
</header>
You could give clip-path a try, but make sure to check browser support.
Can I use CSS clip-path property
You basically just use an ellipse to clip your header div.
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
body {
margin: 0;
}
/* --Global CSS-- */
.header-container{
margin: 0 auto;
width: 1170px;
text-align: right;
}
ul{
padding: 0;
margin:0;
}
/* Header CSS*/
header{
background-color: #000;
/*
border-bottom-left-radius:25%;
border-bottom-right-radius:25%;
*/
padding: 10px;
opacity: 0.35;
position: fixed;
width: 100%;
z-index: 1000;
min-height: 50px;
-webkit-clip-path: ellipse(60% 100% at 50% 0%);
clip-path: ellipse(60% 100% at 50% 0%);
}
header nav ul{
list-style-type: none;
}
header .logo {
display: inline-block;
float: left;
}
header .header-nav{
display: inline-block;
/*float: right;*/
padding: 7px;
}
header li{
float: left;
margin-left: 20px;
}
header li a{
color: #fff;
font: 600 16px 'Open Sans';
text-transform: uppercase;
text-decoration: none;
}
header li a:hover,
header li a:active{
color: #e51937;
text-decoration: none;
}
#media screen and (max-width: 1169px) {
.header-container {
width: 840px;
}
header .header-nav{
display: inline-block;
}
}
#media screen and (max-width: 996px) {
.header-container {
width: 100%;
}
header .logo {
float: none;
display: block;
text-align: center;
}
header .header-nav{
display: none;
}
}
<header>
<div class="header-container">
<div class="logo">
<a href="#">
<img src="http://i.imgur.com/2JbjOqY.png" alt="logo" />
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li>Search</li>
<li>Map</li>
<li>Properties</li>
<li>Parking</li>
<li>Residents</li>
<li>Pay Online</li>
</ul>
</nav>
</div><!-- /.header-nav -->
</div><!-- /.header-container -->
</header>
Can you try this way?
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
/* --Global CSS-- */
.header-container {
margin: 0 auto;
width: 1170px;
}
ul {
padding: 0;
margin: 0;
}
/* Header CSS*/
header {
background-color: #000;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
padding: 10px 10px 35px;
opacity: 0.35;
position: fixed;
width: 100%;
z-index: 1000;
}
header nav ul {
list-style-type: none;
}
header .logo {
display: inline-block;
}
header .header-nav {
display: inline-block;
float: right;
padding: 7px;
}
header li {
float: left;
margin-left: 20px;
}
header li a {
color: #fff;
font: 600 16px'Open Sans';
text-transform: uppercase;
text-decoration: none;
}
header li a:hover,
header li a:active {
color: #e51937;
text-decoration: none;
}
<header>
<div class="header-container">
<div class="logo">
<a href="#">
<img src="http://i.imgur.com/2JbjOqY.png" alt="logo">
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li>Search
</li>
<li>Map
</li>
<li>Properties
</li>
<li>Parking
</li>
<li>Residents
</li>
<li>Pay Online
</li>
</ul>
</nav>
</div>
<!-- /.header-nav -->
</div>
<!-- /.header-container -->
</header>
This is how I did it:
.overlay {
position: absolute;
z-index: -1;
height: 100%;
border-radius: 50%;
width: 150%;
left: -25%;
top: -60%;
background: rgba(121, 121, 121, 0.8);
pointer-events:none;
}
Here is the JSFiddle demo
Adjust the width, left and top percentage to your liking :)
I've finally figured out out the solution of this problem. I've used pesudo class :before for the solution.
/* --Global CSS-- */
.header-container {
display: table;
margin: 0 auto;
width: 1170px;
height: 100%;
}
ul {
padding: 0;
margin: 0;
}
/* Header CSS*/
header {
padding: 10px;
position: fixed;
width: 100%;
z-index: 1000;
}
header:before {
background-color: rgba(0, 0, 0, 0.35);
width: 150%;
content: '';
height: 150px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
top: -76px;
position: absolute;
z-index: -1;
margin-left: -25%;
}
header ul {
list-style-type: none;
}
header .logo {
display: table-cell;
vertical-align: middle;
}
header .header-nav {
display: table-cell;
float: right;
padding: 7px;
vertical-align: middle;
}
header li {
display: inline-block;
}
header li a {
color: #fff;
font: 600 16px'Open Sans';
padding: 0 15px 0 15px;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s;
}
header li a:hover,
header li a:active {
color: #e51937;
text-decoration: none;
}
<header>
<div class="header-container">
<div class="logo">
<a href="#">
<img src="http://i.imgur.com/2JbjOqY.png" alt="logo">
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li>Search
</li>
<li>Map
</li>
<li>Properties
</li>
<li>Parking
</li>
<li>Residents
</li>
<li>Pay Online
</li>
</ul>
</nav>
</div>
<!-- /.header-nav -->
</div>
<!-- /.header-container -->
</header>