I have the following piece of code. I want to shift the search bar on the right most side of the nav bar as well as I want to add a search icon with it. I already used the float:right property for search but to no use. How do I shift it to the right? Following is my HTML and CSS Code Respectively
HTML:
<body>
<header>
<div class="container">
<nav>
<ul>
<li> Home </li>
<li> About </li>
<li> Services </li>
<li> Products </li>
<li> Contact Us </li>
<li> <form class="form"> <input type="text" name="Search" placeholder="Search"> </form> </li>
</ul>
</nav>
</div>
</header>
</body>
And following is my CSS:
body
{
margin: 0;
background: #222;
font-family: 'Work-Sans',sans-serif;
font-weight: 300;
}
.container
{
width: 80%;
margin: 0 auto;
}
header
{
background: #f3e5ab;
}
header::after
{
content: '';
display: table;
clear: both;
}
nav
{
float: left;
}
nav ul
{
margin: 0;
padding: 0;
list-style: none;
}
nav li
{
display: inline-block;
margin-left: 50px;
padding-top: 30px;
position: relative;
}
nav ul li a
{
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover
{
}
nav a::before
{
content: '';
display: block;
height: 5px;
width: 0%;
background-color: #444;
transition: all ease-in-out 500ms;
}
nav a:hover::before
{
width: 100%;
}
form .form
{
float: right;
}
You have to position it.
Try:
ul li:last-child {
position: absolute;
right: 0;
top: 0;
margin: 15px;
padding: 0;
}
header {
background: #f3e5ab;
position: relative
}
nav li {
display: inline-block;
margin-left: 50px;
padding: 15px 0px;
position: relative;
}
http://jsfiddle.net/lotusgodkk/GCu2D/2359/
I hope this is what you want.
Simply make the .search-bar float to the right. It will be on right in the expanded screen.
To keep a search icon inside this, just make it position relative and add extra element like <span class="search-icon"></span> inside it. Make that position absolute.
.search-bar{
position:relative;
}
.search-bar .search-icon{
position:absolute;
right: 5px; //adjust this
top: 2px; //adjust this
}
body
{
margin: 0;
background: #222;
font-family: 'Work-Sans',sans-serif;
font-weight: 300;
}
.container
{
width: 80%;
margin: 0 auto;
}
header
{
background: #f3e5ab;
}
header::after
{
content: '';
display: table;
clear: both;
}
nav
{
float: left;
}
nav ul
{
margin: 0;
padding: 0;
list-style: none;
}
nav li
{
display: inline-block;
margin-left: 50px;
padding-top: 30px;
position: relative;
}
nav ul li a
{
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover
{
}
nav a::before
{
content: '';
display: block;
height: 5px;
width: 0%;
background-color: #444;
transition: all ease-in-out 500ms;
}
nav a:hover::before
{
width: 100%;
}
form .form
{
float: right;
}
.search-bar{
float: right;
}
<body>
<header>
<div class="container">
<nav>
<ul>
<li> Home </li>
<li> About </li>
<li> Services </li>
<li> Products </li>
<li> Contact Us </li>
<li class="search-bar"> <form class="form"> <input type="text" name="Search" placeholder="Search"> </form> </li>
</ul>
</nav>
</div>
</header>
</body>
Related
My intention is to make a top navigation bar, in which the list item PROJECTS is supposed to be a dropdown. So far the dropdown is working, but it takes as much width as the parent element. I want to dissociate the dropdown content from the navigation item without changing formatting properties, such that it occupies just as much space needed by its items and is also positioned right below PROJECTS.
My code:
body{
margin: 0;
padding: 0;
}
nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
background-color: #666666;
position: fixed;
top: 0px;
}
nav li{
float: left;
}
nav li a{
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
padding: 15px;
display: block;
}
nav li a:hover:not(.active){
background-color: #444;
}
nav li a.active{
background-color: rgba(0, 150, 0, 1);
}
main{
padding-top: 30px;
}
.dropdown_content{
display: none;
width: auto;
}
.dropbtn:hover .dropdown_content{
display: block;
}
<body>
<header>
<nav class="nav">
<ul>
<li> Home </li>
<li> About </li>
<li class="dropbtn">
Projects
<div class="dropdown_content">
HTML
CSS
JavaScript
</div>
</li>
<li> Contact </li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body>
How the result looks now:
How I want it to look(image edited)
Thank you in advance.
Just add position: fixed and background-color: #666666 for dropdown_content. Like that:
.dropdown_content {
...
position: fixed;
background-color: #666666;
}
This will not break the positioning of the dropdown menu, because the ul tag also has a fixed positioning.
body {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
background-color: #666666;
position: fixed;
top: 0px;
}
nav li {
float: left;
}
nav li a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
padding: 15px;
display: block;
}
nav li a:hover:not(.active) {
background-color: #444;
}
nav li a.active {
background-color: rgba(0, 150, 0, 1);
}
main {
padding-top: 30px;
}
.dropdown_content {
display: none;
width: auto;
position: fixed;
background-color: #666666;
}
.dropbtn:hover .dropdown_content {
display: block;
}
<body>
<header>
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li class="dropbtn">
Projects
<div class="dropdown_content">
HTML
CSS
JavaScript
</div>
</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main></main>
<footer></footer>
</body>
You can try absolute positioning.
body {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: #666666;
position: fixed;
top: 0px;
font-size: 0;
}
nav li {
display: inline-block;
}
nav li a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
padding: 15px;
display: block;
font-size: 16px;
}
nav li a:hover:not(.active) {
background-color: #444;
}
nav li a.active {
background-color: rgba(0, 150, 0, 1);
}
main {
padding-top: 30px;
}
.dropdown_content {
position: absolute;
display: none;
background-color: #666666;
}
.dropbtn:hover .dropdown_content {
display: block;
}
<body>
<header>
<nav class="nav">
<ul>
<li> Home </li>
<li> About </li>
<li class="dropbtn">
Projects
<div class="dropdown_content">
HTML
CSS
JavaScript
</div>
</li>
<li> Contact </li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body>
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>
I've created a submenu which appears when you hover over the 'services' link. However, when I move my mouse over to the submenu it disappears due to it sitting below the navigation where I want it to be.
So far I’ve tried leaving the submenu in its natural top position and using z-index to make it sit behind the navigation. I found that this wouldn't work due to the submenu being positioned absolute.
body {
font-family: acumin-pro, sans-serif;
font-size: 16px;
letter-spacing: .25px;
margin: 0;
}
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul:hover li a {
color: #eee
}
.nav ul li:hover a {
color: #333;
}
.nav a:last-child {
margin: 0px;
}
.nav ul {
list-style: none;
padding: 0px;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: block;
opacity: 1
}
.sub-menu {
height: 200px;
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>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
The submenu should sit exactly below the navigation and stay visible when I move my mouse across from the link to the submenu.
I have included padding-bottom: 20px; on hover
the link need to be connected to the submenu so that it is still hovered
body {
font-family: acumin-pro, sans-serif;
font-size: 16px;
letter-spacing: .25px;
margin: 0;
}
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul:hover li a {
color: #eee
}
.nav ul li:hover a {
color: #333;
padding-bottom: 20px;
}
.nav a:last-child {
margin: 0px;
}
.nav ul {
list-style: none;
padding: 0px;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: block;
opacity: 1
}
.sub-menu {
height: 200px;
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>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
Remove margin .nav ul & add padding for .nav a
.nav ul {
list-style: none;
padding: 0px;
margin:0;
}
.nav a {
color: #000;
padding: 10px 0;
display: block;
}
body {
font-family: acumin-pro, sans-serif;
font-size: 16px;
letter-spacing: .25px;
margin: 0;
}
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
padding: 10px 0;
display: block;
}
.nav ul:hover li a {
color: #eee
}
.nav ul li:hover a {
color: #333;
}
.nav a:last-child {
margin: 0px;
}
.nav ul {
list-style: none;
padding: 0px;
margin:0;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: block;
opacity: 1
}
.sub-menu {
height: 200px;
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>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
I used this.
body {
font-family: acumin-pro, sans-serif;
font-size: 16px;
letter-spacing: .25px;
margin: 0;
}
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul:hover li a {
color: #eee
}
.nav ul li:hover a {
color: #333;
}
.nav a:last-child {
margin: 0px;
}
.nav ul {
list-style: none;
padding: 0px;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: block;
opacity: 1
}
.sub-menu {
height: 200px;
position: absolute;
top: 100%;
background: #333;
opacity: 0;
left: 0;
right: 0;
display: none;
}
.sub-menu::before {
content: "";
top: -18px;
width: 100%;
height: 20px;
position: absolute;
}
<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>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
Just replace this to your existing css, nothing else.
.nav a {
color: #000;
padding-bottom: 20px;
display: inline-block;
}
.nav ul {
list-style: none;
padding: 0px;
margin: 0;
}
I made the following nav bar for the website of a client. But just at the end Client told me to make this navbar fixed on top, Obviously it will take a lot of time and effort to build a navbar from scratch just to make it fixed on top. Is there any way I can make my existing navbar fixed on top by modifying CSS?
HTML:
body
{
margin: 0;
background: #222;
font-weight: 300;
background-image: url('bg.jpeg');
}
header
{
background: #d9c2ac;
position: relative;
}
header::after
{
content: '';
display: table;
clear: both;
}
nav
{
float: left;
}
nav ul
{
margin: 0;
padding: 0;
list-style: none;
}
nav li
{
display: inline-block;
margin-left: 70px;
padding-top: 30px;
position: relative;
}
nav ul li a
{
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
}
nav a:hover
{
}
nav a::before
{
content: '';
display: block;
height: 5px;
width: 0%;
background-color: #444;
transition: all ease-in-out 500ms;
}
nav ul li:last-child
{
position: absolute;
right: 0;
bottom: 0;
margin: 15px;
margin-bottom: 0px;
padding: 0;
}
nav ul li:first-child {
margin-left: 0;
}
nav a:hover::before
{
width: 100%;
}
nav ul li:last-child
{
margin-right: auto;
}
<header>
<div class="container" id="#home">
<nav>
<ul>
<li id="login"> Login/Register </li>
<li> Home </li>
<li> About </li>
<li> Services </li>
<li> Products </li>
<li> Contact Us </li>
<li> <form class="form"> <input type="text" name="Search" placeholder="Search"> </form> </li>
</ul>
</nav>
</div>
</header>
change some css
header
{
background: #d9c2ac;
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 99; //Change as per your requirement.
}
Try the changes mentioned if it works for you. I think it may solve your problem.
CSS and
HTML
body
{
margin: 0;
background: #222;
font-weight: 300;
background-image: url('bg.jpeg');
}
header
{
background: #d9c2ac;
position: fixed; //Add this
top: 0;//Add this
left: 0;//Add this
z-index: 1000;//Add this
width: 100%;//Add this
}
header::after
{
content: '';
display: table;
clear: both;
}
nav
{
float: left;
}
nav ul
{
margin: 0;
padding: 0;
list-style: none;
}
nav li
{
display: inline-block;
margin-left: 70px;
padding-top: 30px;
position: relative;
}
nav ul li a
{
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
}
nav a:hover
{
}
nav a::before
{
content: '';
display: block;
height: 5px;
width: 0%;
background-color: #444;
transition: all ease-in-out 500ms;
}
nav ul li:last-child
{
position: absolute;
right: 0;
bottom: 0;
margin: 15px;
margin-bottom: 0px;
padding: 0;
}
nav ul li:first-child {
margin-left: 0;
}
nav a:hover::before
{
width: 100%;
}
nav ul li:last-child
{
margin-right: auto;
}
//Add this property to your content div
#content {
position: relative;
padding-top: 55px; // Height of your navbar
background-color: white;
}
<header>
<div class="container" id="#home">
<nav>
<ul>
<li id="login"> Login/Register </li>
<li> Home </li>
<li> About </li>
<li> Services </li>
<li> Products </li>
<li> Contact Us </li>
<li> <form class="form"> <input type="text" name="Search" placeholder="Search"> </form> </li>
</ul>
</nav>
</div>
</header>
<div id="content">Your body content here</div>
This question already has answers here:
How can I transition width of content with width: auto?
(2 answers)
workaround for display block and css transitions not triggering
(4 answers)
Closed 5 years ago.
this is my very second question!
I also searched in the questions but nothing helps.
I have a problem with transitions. I am trying to apply a 300ms transition to the menu when the toggle button is checked on mobile view; I tried in vain with negative values in the class .menu. Now, doing so the menu slides up but I want it to slide down and nothing seems to help. I also tried with the z-index but nothing seems to work.
I really can't figure out what to do. Any help that could send me on the right direction would be greatly appreciated!
<!-- === MENUTOGGLE === -->
<input type="checkbox" name="checkbox" id="menuToggle" value="value">
<label for="menuToggle" class="menu-icon">☰</label>
<!-- ==== HEADER ==== -->
<header>
<div id="logo" class="brand">
<h1><img src="images/logo.png" alt="Hello"></h1>
</div>`enter code here`
<nav class="menu">
<ul>
<li>Work</li>
<li>About</li>
<li>Blog </li>
<li>Contact</li>
</ul>
</nav>
</header>
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
body {
background: #eee;
color: #444;
-webkit-font-smoothing: antialiased;
font-family: Arial, sans-serif;
font-weight: 400;
height: auto !important;
height: 100%;
min-height: 100%;
text-rendering: optimizeLegibility;
}
header {
display: block;
background-color: #FFF;
height: inherit;
}
nav {
text-align: center;
line-height: 3.5em;
}
nav ul {
background-color: rgba(255, 255, 255, 0.15);
float: none;
line-height: inherit;
margin: 0;
}
nav ul li {
display: block;
list-style-type: none;
}
nav ul li:hover {
background-color: #ededed;
}
nav ul li a {
text-decoration: none;
color: #313131;
}
nav ul li a:hover {
color: #b9b5b5;
}
#menuToggle {
display: none;
}
.menu {
width: 100%;
position: absolute;
top: 66px;
transition: all 300ms ease-in-out;
}
.menu-icon {
float: right;
color: #2f2f2f;
cursor: pointer;
padding-top: 0.46em;
padding-right: 1em;
padding-left: 1em;
padding-bottom: 0.46em;
text-decoration: none;
font-size: 30px;
}
.menu {
display: none;
}
#menuToggle:checked ~ header .menu {
display: block;
top;
66px;
}
#logo {
float: none;
text-align: left;
padding-top: 7px;
padding-left: 2em;
height: inherit;
}
#menuToggle:checked ~ header .menu {
display: block;
top;
66px;
}
should be
#menuToggle:checked ~ header .menu {
display: block;
top: 66px;
}
#media screen and (min-width:600px) {
#logo {
float: left;
}
.menu {
width: 100%;
height: 70px;
position: absolute;
display: block;
}
.menu-icon {
display: none;
}
header {
height: 70px;
background-color: #FFF;
margin: auto;
width: 100%;
}
nav {
height: -66px;
width: 100%;
}
nav ul {
background-color: #FFF;
display: inline;
float: right;
padding: 0.55em 2em 0 0;
height: inherit;
}
nav ul li {
display: inline;
margin: 0.2em auto;
}
nav ul li:hover {
background-color: #FFF;
}
nav ul li a {
padding: 0 2em;
}
<!-- === MENUTOGGLE === -->
<input type="checkbox" name="checkbox" id="menuToggle" value="value">
<label for="menuToggle" class="menu-icon">☰</label>
<!-- ==== HEADER ==== -->
<header>
<div id="logo" class="brand">
<h1><img src="images/logo.png" alt="Hello"></h1>
</div>`enter code here`
<nav class="menu">
<ul>
<li>Work</li>
<li>About</li>
<li>Blog </li>
<li>Contact</li>
</ul>
</nav>
</header>