I'm trying to have a full screen header and at the bottom of that (but within it) have a link which says learn more. Then below the header have the rest of the website content, in this case "test".
The two issues I have is:
Learn more should sit at the bottom middle but it doens't, it sits slightly to the right
The div class "content" is sat within the gray box not under it.
This is the code I am working with:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
a {
text-decoration: none;
}
.header {
height: 100%;
width: 100%;
background: lightgray;
text-align: center;
min-height: 350px;
position: relative;
}
li {
list-style: none;
}
.nav {
display: block;
padding: 20px;
}
.nav img {
float: left;
}
.nav ul {
float: right;
font-size: 0;
}
.nav ul li {
display: inline-block;
font-size: 16px;
padding-left: 10px;
}
.nav ul li:first-child {
padding-left: 0px
}
.nav ul li a {
padding: 0 10px;
}
.learn {position: absolute; bottom: 0; width: 200px;}
.content {background-color: blue; display: block;}
<html>
<body>
<div class="header">
<div class="nav">
<img width="39" height="35" alt="" src="#">
<ul>
<li>Services
</li>
<li>Writings
</li>
<li>Contact
</li>
</ul>
</div>
<span class="billboard">Hello!</span>
<a class="learn">Learn More</span>
</div>
<div class="content">Test</div>
</body>
</html>
You have an unclosed anchor tag. And you need to set left: 50%; width: auto; to your .learn class in order to center it.
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
a {
text-decoration: none;
}
.header {
height: 100%;
width: 100%;
background: lightgray;
text-align: center;
min-height: 350px;
position: relative;
}
li {
list-style: none;
}
.nav {
display: block;
padding: 20px;
}
.nav img {
float: left;
}
.nav ul {
float: right;
font-size: 0;
}
.nav ul li {
display: inline-block;
font-size: 16px;
padding-left: 10px;
}
.nav ul li:first-child {
padding-left: 0px
}
.nav ul li a {
padding: 0 10px;
}
.learn {position: absolute; bottom: 0; width: auto; left: 50%;}
.content {background-color: blue; display: block;}
<html>
<body>
<div class="header">
<div class="nav">
<img width="39" height="35" alt="" src="#">
<ul>
<li>Services
</li>
<li>Writings
</li>
<li>Contact
</li>
</ul>
</div>
<span class="billboard">Hello!</span>
<a class="learn">Learn More</span></a>
</div>
<div class="content">Test</div>
</body>
</html>
To center align 'Learn more', use
.learn {
position: absolute; bottom: 0; width: 200px;
left: 50%; transform: translateX(-50%);
}
Before the content, <a class="learn">Learn More</span> closing tag should be </a>
https://jsfiddle.net/afelixj/efty6zjL/
Related
I am looking to have it so that when you hover over the nav bar the drop-down menu sits above/on-top of the main content, however at the moment when the menu drops down it is pushing the main image down and not sitting on top as I would expect the z-index property to do.
I have set the nav div to relative and also the main section div to relative but still with no joy!
Anyone out there able to help with this, please?
<div id="top-bar-container">
<img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
<i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
<nav id="nav-bar">
<ul id="test">
<li>Home</li>
<li>About Us</li>
<li>
Services
<ul>
<li>Web Design</li>
<li>Branding</li>
<li>Consulting</li>
<li>SEO</li>
</ul>
</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div id="main-section">
<img id="main-img" src="img/main-image.png" alt="" />
</div>
#top-bar-container {
background-color: #ec671c;
width: 100%;
height: 75px;
}
#nav-bar {
width: 75%;
float: right;
padding-right: 50px;
position: relative;
z-index: 1;
}
ul {
list-style: none;
padding: 0;
float: right;
}
ul li {
float: left;
width: 90px;
list-style: none;
margin-top: 10px;
text-align: center;
padding: 5px;
}
ul li:hover {
background-color: #ec671c;
border-radius: 5%;
}
ul li a {
text-decoration: none;
color: white;
}
ul li a:hover {
color: orange;
}
ul li ul {
line-height: 25px;
}
ul li ul li {
display: none;
font-size: 13px;
}
ul li ul li a {
color: white;
}
ul li:hover ul li {
display: block;
padding: 0px;
}
#hamburger-icon {
display: none;
color: white;
position: absolute;
right: 20px;
top: 20px;
}
#hamburger-icon:hover {
color: orange;
}
#main-section {
width: 100%;
height: 100vh;
position: relative;
}
#main-img {
width: 100%;
height: 100vh;
}
The #main-section is pushed down because the dropdown menu is positioned within the flow of the document.
When it is not hovered, it has display: none which takes it out of the DOM.
When hover, it switches to position: block which puts it back - and it occupies space, and pushes the main-content down.
You can test this by adding the desired end-result display: block by default, and see how the document would look in it's expanded state.
You need to apply position: absolute to your drop-down, in order for it to not interfere with the document flow. You could also move the z-index: 1 directly on it, if that is the content that should be on top - or you could leave it on the parent, and should work just as well. - the z-index is not the problem here.
#top-bar-container {
background-color: #ec671c;
width: 100%;
height: 75px;
}
#nav-bar {
width: 75%;
float: right;
padding-right: 50px;
}
ul {
list-style: none;
padding: 0;
float: right;
background-color: #ec671c;
}
ul li {
float: left;
width: 90px;
list-style: none;
margin-top: 10px;
text-align: center;
padding: 5px;
position:relative;
}
ul li:hover {
background-color: #ec671c;
border-radius: 5%;
}
ul li a {
text-decoration: none;
color: white;
}
ul li a:hover {
color: orange;
}
ul li ul {
line-height: 25px;
}
ul li ul li {
display: none;
font-size: 13px;
}
ul li ul li a {
color: white;
}
ul li:hover ul li {
display: block;
padding: 0px;
}
#hamburger-icon {
display: none;
color: white;
position: absolute;
right: 20px;
top: 20px;
}
#hamburger-icon:hover {
color: orange;
}
#main-section {
width: 100%;
height: 100vh;
}
#main-img {
width: 100%;
height: 100vh;
}
#top-bar-container >nav >ul > li > ul{
position:absolute;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
</style>
</head>
<body>
<div id="top-bar-container">
<img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
<i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
<nav id="nav-bar">
<ul id="test">
<li>Home</li>
<li>About Us</li>
<li>
Services
<ul>
<li>Web Design</li>
<li>Branding</li>
<li>Consulting</li>
<li>SEO</li>
</ul>
</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div id="main-section">
<img id="main-img" src="img" alt="" />
</div>
</body>
</html>
hi
You can do in the section ul>li{position:relative} and Also, put in a second UL {position:absolute}
I'm trying to replica the navigation menu from this website. I've managed to it working to a certain extent, but can't make the service link when hovered to stay the same colour and all of the other to change.
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul {
list-style: none;
padding: 0;
width: fit-content;
}
.nav ul:hover a{
color: #eee !important;
padding-bottom: 20px;
}
.nav ul li:hover a {
color: #333;
padding-bottom: 20px;
}
.nav li:last-child {
margin: 0;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: flex;
opacity: 1
}
.sub-menu {
height: 200px;
display: flex;
flex-direction: row;
position: absolute;
top: 100%;
background: #333;
display: none;
opacity: 0;
left: 0;
right: 0;
}
<div class="header">
<div class="nav">
<ul>
<li>
<a class="one">Home</a>
</li>
<li>
<a class="two">About</a>
</li>
<li class="three">
<a class="">Services</a>
<div class="sub-menu">
<div class="col-1-4"></div>
</div>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
As you can see I've changed the link colours on hover of the unordered list which is probably not the best way of trying to get this to work. Please, could someone advise me on the best method to fix this?
You're close -- you have to remove the !important from the rule affecting .nav ul:hover a as this is overriding the rule that will ensure the hovered item is a different color than the rest:
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul {
list-style: none;
padding: 0;
width: fit-content;
}
.nav ul:hover a{
color: #eee;
padding-bottom: 20px;
}
.nav ul li:hover a {
color: #333;
padding-bottom: 20px;
}
.nav li:last-child {
margin: 0;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: flex;
opacity: 1
}
.sub-menu {
height: 200px;
display: flex;
flex-direction: row;
position: absolute;
top: 100%;
background: #333;
display: none;
opacity: 0;
left: 0;
right: 0;
}
<div class="header">
<div class="nav">
<ul>
<li>
<a class="one">Home</a>
</li>
<li>
<a class="two">About</a>
</li>
<li class="three">
<a class="">Services</a>
<div class="sub-menu">
<div class="col-1-4"></div>
</div>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
Here's a good resource on how !important affects other rules on the page.
I have a question, is it possible to have a full width dropdown menu when my wrapper has a width of 1024px (all contents are centered on screen)? Because I am having problems with my dropdown menu. Though, it is not yet working with the hover but I'm still trying to style my dropdown menu.
Here's my code:
#lower-header {
background-color: #ffffff;
height: 100px;
position: relative;
width: -webkit-fill-available;
z-index: 1;
img {
float: left;
margin-top: 33px;
}
ul {
list-style: none;
display: block;
float: left;
margin: 17px 0px;
padding-left: 30px;
li {
display: inline-block;
font-size: 17px;
font-weight: bold;
padding: 16px 19px;
height: 73px;
.sub-menu-whole {
background-color: #ffffff;
height: 360px;
/*position: absolute;*/
z-index: 1;
margin-top: 44px;
&:after {
content: "";
display: table;
clear: both;
}
div {
position: absolute;
margin: -33px 0;
padding: 0;
div {
float: right;
}
}
}
a {
text-decoration: none;
color: #000000;
&:hover {
color: red;
}
}
}
}
}
<div id="lower-header">
<div class="wrapper">
<img src="images/logo/logo_01.png">
<ul>
<li>
KU 스타트업
<div class="sub-menu-whole">
<div>
<img src="images/bg/bg_sub_01.png">
</div>
<div class="column">
<ul>
<li>
<a>인사말</a>
</li>
<li>
<a>창업부서소개</a>
</li>
</ul>
</div>
</div>
</li>
<li>프로그램</li>
<li>스타트업 리더</li>
<li>창업보육</li>
<li>창업멘토단</li>
<li>커뮤니티</li>
</ul>
</div>
</div>
Remove the float: left; property from the ul and add width:100%;
I want to get this menu bar to appear on the full width of the container/div (horizontal). With equal amount of margin in between the menu items, which are lis. I want this to work for every viewport.
The thing is margin: 0 auto; doesn't work. What should I do instead?
.button-row {
background-color: #fcfcfc;
position: relative;
height: 70px;
width: 100%;
float: left;
overflow: hidden;
position: relative;
}
.button-row ul {
clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
.button-row ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
.button-row ul li a {
display: block;
margin: 0 0 0 1px;
padding: 3px 10px;
text-decoration: none;
line-height: 1.3em;
}
<div class="container-fluid">
<div class="row">
<div class="button-row">
<ul>
<li><a>Additional information</a>
</li>
<li><a>Current exchange rates</a>
</li>
<li><a>ATMs and institutions</a>
</li>
<li><a>Protection</a>
</li>
<li><a>Files to download</a>
</li>
</ul>
</div>
</div>
</div>
Full width of the container/div (horizontal). with equal amount of (margin) in between the li's, for every viewport as you wish.
You can try with flexbox like this, if that's what you want:
.button-row {
background-color: #fcfcfc;
height: 70px;
width: 100%;
}
.button-row ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.button-row ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
width: 20%;
text-align: center;
}
.button-row ul li a {
display: block;
margin: 0 0 0 1px;
padding: 3px 10px;
text-decoration: none;
line-height: 1.3em;
}
<div class="container-fluid">
<div class="row">
<div class="button-row">
<ul>
<li><a>Additional information</a>
</li>
<li><a>Current exchange rates</a>
</li>
<li><a>ATMs and institutions</a>
</li>
<li><a>Protection</a>
</li>
<li><a>Files to download</a>
</li>
</ul>
</div>
</div>
</div>
.button-row{
width: 100%;
}
.button-row a{
display: inline-block;
width: calc(100% / 5);
float: left;
text-align: center;
}
<div class="container-fluid">
<div class="row">
<div class="button-row">
<a>Additional information</a>
<a>Current exchange rates</a>
<a>ATMs and institutions</a>
<a>Protection</a>
<a>Files to download</a>
</div>
</div>
</div>
Without ul li and fully responsive.
Here my simple code of navigation bar
#navi
{
width:100%;
}
center{
background-color: #333;
height:7%;
}
.ulnav {
float:right;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
margin-right:350px;
}
.ulnav li {
float: left;
border-right:1px solid blue;
border-left:1px solid red;
}
.ulnav li:last-child {
border-right: none;
}
.ulnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.ulnav li a:hover:not(.active) {
color: #ccff33;
background-color: #111;
}
.active {
background-color: #ccff33;
}
<center><ul class="ulnav">
<li><a class="active">Additional information</a>
</li>
<li><a>Current exchange rates</a>
</li>
<li><a>ATMs and institutions</a>
</li>
<li><a>Protection</a>
</li>
<li><a>Files to download</a>
</li>
</ul></center>
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>