I have navigation bar. I want to move the text 50px from left. I can do this?
.navigation {
width: 100%;
height:35px;
background-color: #f1b500; /*f2c255*/
margin-top: 4.4em;
}
.navigation a {
float: left;
display: block;
color: white;
text-align: center;
padding: 8px 25px;
text-decoration: none;
font-size: 100%;
}
.navigation .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 100%;
border: none;
outline: none;
color: white;
padding: 8px 25px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1b500;
min-width: 120px;
box-shadow: 0px 8px 16px 9px rbga(0,0,0,0.2)
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 8px 15px;
text-decoration: none;
display: block;
text-align: inherit;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #34b0ff;
color: black;
}
.dropdown-content a:hover {
background-color: #34b0ff;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
The menu text is now all the way to the left. I would like to move it 50 pixels further to the right. Is the code wrong or do you just need to add something? I tried adding margin-left: 50px; but it does not work. I state that I am a beginner on programming.
<div class="navigation" id="Nav">
Home
<div class="dropdown">
<button class="dropbtn">Dropbutton
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link1
Link2
Link3
</div>
</div>
Test
Test
</div>
This is my html code. I forgot to post it
add padding-left:50px to .navigation. and everything will move to the right 50px
.navigation {
width: 100%;
height:35px;
background-color: #f1b500; /*f2c255*/
margin-top: 4.4em;
padding-left:50px;
}
.navigation a {
float: left;
display: block;
color: white;
text-align: center;
padding: 8px 25px;
text-decoration: none;
font-size: 100%;
}
.navigation .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 100%;
border: none;
outline: none;
color: white;
padding: 8px 25px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1b500;
min-width: 120px;
box-shadow: 0px 8px 16px 9px rbga(0,0,0,0.2)
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 8px 15px;
text-decoration: none;
display: block;
text-align: inherit;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #34b0ff;
color: black;
}
.dropdown-content a:hover {
background-color: #34b0ff;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navigation" id="Nav">
Home
<div class="dropdown">
<button class="dropbtn">Dropbutton
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link1
Link2
Link3
</div>
</div>
Test
Test
</div>
yeah change your padding to 8px 25px 0px 50px
Either adding padding-left: 50px; or transform: translateY(50px);
Related
This question already has answers here:
How do I center floated elements?
(12 answers)
Closed 5 months ago.
I've got this nav bar almost right where I want it, but I just need to center it on the page. How can I center the navigation without changing anything else? No matter what I try, it will always align to the left of the page. I know it's probably because of the "float: left" properties, but changing those ruins the whole navbar layout.
.navbar {
overflow: hidden;
background-color: none;
text-align: center;
}
.navbar a {
float: left;
font-size: 16px;
color: grey;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition-duration: 0.3s;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: grey;
padding: 0px 0px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
color: #FFF;
}
.dropdown-content {
display: none;
position: absolute;
background-color: none;
margin-top: 45px;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: grey;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: none;
padding: 12px 25px;
color: #FFF;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar .focus {
color: #FFF;
}
<div class="navbar">
HOME
<div class="dropdown"><a href="#">PRACTITIONERS
<button class="dropbtn">
<i class="fa fa-caret-down"></i>
</button></a>
<div class="dropdown-content">
Biochemistry
Biophysics
Nutrition
</div>
</div>
CONSUMERS
NETWORK
</div>
you can add display flex and justify content center like this
.navbar {
display: flex;
justify-content: center;
overflow: hidden;
background-color: none;
text-align: center;
}
.navbar {
overflow: hidden;
background-color: none;
text-align: center;
margin-left: 25%;
}
Make navbar a Flexbox and with justify-content: center, align its children to the center of navbar.
body {
background: lightgray;
}
.navbar {
/* add the following two styles */
display: flex;
justify-content: center;
overflow: hidden;
background-color: none;
text-align: center;
}
.navbar a {
float: left;
font-size: 16px;
color: grey;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition-duration: 0.3s;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: grey;
padding: 0px 0px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
color: #FFF;
}
.dropdown-content {
display: none;
position: absolute;
background-color: none;
margin-top: 45px;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: grey;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: none;
padding: 12px 25px;
color: #FFF;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar .focus {
color: #FFF;
}
<div class="navbar">
HOME
<div class="dropdown"><a href="#">PRACTITIONERS
<button class="dropbtn">
<i class="fa fa-caret-down"></i>
</button></a>
<div class="dropdown-content">
Biochemistry
Biophysiscs
Nutrition
</div>
</div>
CONSUMERS
NETWORK
</div>
I want to align my dropdown menu a tags to the center but can't figure out how to do that, only started with CSS recently.
It would display the dropdown dropdownbtn items in the dropdown-content with the links aligned to the center.
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #ddd;
color: black;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown Menu</button>
<div class="dropdown-content">
Link 1
Link 2
</div>
</div>
Use a transform on the dropdown.
left: 50%;
transform: translatex(-50%);
Also I switched from float to flexbox for simplicity and a more modern approach.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.navbar {
background-color: #333;
display: flex;
align-items: center;
}
.navbar a {
font-size: 16px;
color: #f2f2f2;
padding: 14px;
text-decoration: none;
}
.dropdown {
position: relative;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #ddd;
color: black;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
left: 50%;
transform: translatex(-50%);
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown Menu</button>
<div class="dropdown-content">
Link 1
Link 2
</div>
</div>
I'm building a navigation bar and I want
all the items on the same row [not sure why a 2nd row is created]
the dropdown items from 'Samples' button to display vertically instead of horizontally
JSFiddle: https://jsfiddle.net/RadiantSilvergun/xsbnjo5g/5/
I've used <div> elements instead of <ul> and <li> elements, is that a problem?
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.dropbutton {
background-color: #333;
color: white;
padding: 14px 16px;
font-size: 16px;
font: 1em times;
border: none;
cursor: pointer;
}
.dropdown {
position: static;
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content>a {
position: relative;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content>a:hover {
background-color: #f1f1f1;
position: relative;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbutton {
background-color: darkgrey;
}
.button {
background-color: black;
color: white;
border-radius: 5px;
;
padding: 15px 15px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
}
<div class="topnav">
<div>Contact Me</div>
<div class="dropdown">
<button class="dropbutton">Samples</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div>Recommendations</div>
<div>Video Editing</div>
<div>Photoshop</div>
<div><a style="float: right" href="#">About</a></div>
</div>
How do i fix the navigation bar, so that the drop-down doesn't go over its parent and it's in line with it?
Also, how do i make the "About" tab to be filled when you hover over it? As you can see it only fills some of it, not until the end of the navigation bar.
There is my fiddle: https://jsfiddle.net/Shade1337/29sd0g07/
.navigation {
overflow: hidden;
height: 60px;
border: 3px solid #E3E3E3;
background-color: #1f1d1d;
font-family: Arial, Helvetica, sans-serif;
width: 1078px;
}
.navigation a {
float: left;
font-size: 30px;
color: antiquewhite;
text-align: center;
padding: 18px 20px;
text-decoration: none;
width: 234px;
height: 25px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
border-style: none;
border-color: inherit;
font-size: 30px;
margin: 0;
outline: none;
color: antiquewhite;
padding: 18px 20px;
background-color: inherit;
font-family: inherit;
width: 214px;
height: 25px;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #4e3f3f;
}
.dropdown-content {
overflow: hidden;
display: none;
position: absolute;
background-color: #1f1d1d;
min-width: 214px;
box-shadow: 0px 8px 16px 0px rgb(186,179,179);
z-index: 1;
}
.dropdown-content a {
float: none;
color: antiquewhite;
padding: 18px 20px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: #4e3f3f;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navigation">
Home
<div class="dropdown">
<button class="dropbtn">Types
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Regular
Cafe latte
Espresso
Cappuccino
</div>
</div>
Shop
About
</div>
Not sure if this is what you want. But here is the solution for what you asked. See the snippet answer.
.navigation {
overflow: hidden;
height: 60px;
border: 3px solid #E3E3E3;
background-color: #1f1d1d;
font-family: Arial, Helvetica, sans-serif;
width: 1078px;
}
.navigation a {
float: left;
font-size: 30px;
color: antiquewhite;
text-align: center;
padding: 18px 20px;
text-decoration: none;
width: 234px;
height: 25px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
border-style: none;
border-color: inherit;
font-size: 30px;
margin: 0;
outline: none;
color: antiquewhite;
padding: 18px 20px;
background-color: inherit;
font-family: inherit;width:100%;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #4e3f3f;
}
.dropdown-content {
overflow: hidden;
display: none;
top:71px;
position: absolute;
background-color: #1f1d1d;
box-shadow: 0px 8px 16px 0px rgb(186,179,179);
z-index: 1;
}
.dropdown-content a {
float: none;
color: antiquewhite;
padding: 18px 20px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: #4e3f3f;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navigation">
<div style="width:25%;float:left">
Home
</div>
<div class="dropdown" style="width:25%;float:left">
<button class="dropbtn">Types
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Regular
Cafe latte
Espresso
Cappuccino
</div>
</div>
<div style="width:25%;float:left">
Shop
</div>
<div style="width:25%;float:left">
About
</div>
Solution:-
You will add bootstrap css file in your project and use bootstrap classes as per the your requirement
For more Info visit the link:-
https://getbootstrap.com/docs/3.3/getting-started/
The solution for the first problem would be to add height: 100% instead of height: 25px; to .dropbtn class.
And the solution for the second problem would be to change the width of .navigation a and .dropdown and to change padding in .navigation a to padding: 18px 0;
Thus something as follows:
.navigation {
overflow: hidden;
height: 60px;
border: 3px solid #E3E3E3;
background-color: #1f1d1d;
font-family: Arial, Helvetica, sans-serif;
width: 1078px;
}
.navigation a {
float: left;
font-size: 30px;
color: antiquewhite;
text-align: center;
padding: 18px 0;
text-decoration: none;
width: calc(1078px / 4);
height: 25px;
}
.dropdown {
float: left;
overflow: hidden;
width: calc(1078px / 4);
}
.dropdown .dropbtn {
border-style: none;
border-color: inherit;
box-sizing: border-box;
font-size: 30px;
margin: 0;
outline: none;
color: antiquewhite;
padding: 14px 20px;
background-color: inherit;
font-family: inherit;
width: 214px;
height: 100%;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #4e3f3f;
}
.dropdown-content {
overflow: hidden;
display: none;
position: absolute;
background-color: #1f1d1d;
min-width: 214px;
box-shadow: 0px 8px 16px 0px rgb(186,179,179);
z-index: 1;
}
.dropdown-content a {
float: none;
color: antiquewhite;
padding: 18px 20px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: #4e3f3f;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navigation">
Home
<div class="dropdown">
<button class="dropbtn">Types
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Regular
Cafe latte
Espresso
Cappuccino
</div>
</div>
Shop
About
</div>
Here is the fiddle.
So, my newer index is here, but the DropDown link list(when you hover over the link stuff you will see it) on the blog portion of my website which is here does not change. Any help would be nice. This is the menu bar for my website with the link list that is set up as a widget, since it's a blogger blog attached to the website itself:
<style type="text/css">
ul{
list-style-type: none;
margin: 0px;
padding: 150px;
overflow: hidden;
background-color: transparent;
position: absolute;
top: -79px;
left: -703.8px;
width: 940px;
font-size:19px;
font-family: Geo;
}
li {
float: left;
text-align: center;
color: #FF733B;
background-color: transparent;
}
li a {
float: left;
display: block;
padding: 20px;
color: #F2F2F2;
transition: .5s;
text-decoration: none;
background-color: transparent;
}
.dropbtn {
background-color: transparent;
color: #efefef;
padding: auto;
font-size: 12px;
border: none;
cursor: pointer;
}
.dropdown {
float: left;
display: relative;
font-color: #000;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 260px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
top: 65px;
z-index: 4;
}
.dropdown-content a {
color: #000;
padding: 8px 10px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
transition: .4s;
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: transparent;
}
</style>
<p align="center">
<div class="table">
<ul>
<li>Home</li><li>DATA</li><li>About</li><div class="dropdown">
<li class="dropbtn"><li>Stuff</li>
<div class="dropdown-content">
NIGHTCORE Creator
Artwork
BLOG
</div></li></div></ul></div></p>
<img style="float: right; margin: -69.9px -8.5px 0px 75px; height: 125.5%; width: 125.5%;" src="http://www.substructures.us/substructures2.png" />