I am trying to remove the white space in the dropdown menu. I have tried padding:0 and margin:0, but both do not seem to work. I am currently using Bootstrap 3.3.7.
My HTML:
HTML Navbar code
My CSS:
.topnav {
width: 100%;
height: 50px;
background-color: transparent;
opacity: 0.7;
margin: 0;
padding-left: 0;
padding-right: 0;
border: none;
}
.topnav ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
}
.topnav li {
float: left;
list-style-type: none;
}
.topnav li a {
width: 150px;
color: #FFFFFF;
display: block;
text-decoration: none;
font-size: 20px;
text-align: center;
padding: 10px;
font-family: Montserrat;
font-weight: bold;
}
.topnav li ul li a {
background-color: #000000;
color: #FFFFFF;
padding: 8px;
}
White Space in Navbar
Related
I'm sorry to ask this question because it has been largely posted, but I checked a lot of links and didn't solve it yet. I have a navbar with 2 elements and I cannot center it in the middle of the nav.
#menu {
background: #000000;
background: linear-gradient(to bottom, #973F8E, #DC4069);
color: #FFF;
height: 52px;
width: 500px;
padding-left: 18px;
border-radius: 50px;
border: 1px solid #000000;
margin: auto;
display:block;
text-align:center !important;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
list-style: none;
display: block;
text-align: center;
}
#menu ul {
width: 100%;
}
#menu li {
float: left;
display: inline;
position: relative;
}
#menu a {
display: block;
line-height: 50px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #000000;
background: #FFA6AF;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 52px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 50px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 170px;
background: #444444;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #FFFFFF;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #F2F2F2;
color: #444444;
}
<nav id="menu">
<input type='checkbox' id='responsive-menu' onclick='updatemenu()'><label></label>
<ul>
<li><a href='/'>DASHBOARD</a></li>
<li><a href='/model'>MODEL</a></li>
</ul>
</nav>
Probably in the large number of css elements I'm not able to see where the code is not working.
I posted the code here:
codepen
You should remove the left padding from the main #menu element, set the ul's display to inline-block and the width to auto (just remove the width property).
This will work because the #menu element has text-align: center. the ul will be centered since its width is not 100% (because width is set to auto and the display to inline-block).
#menu {
background: #000000;
background: linear-gradient(to bottom, #973F8E, #DC4069);
color: #FFF;
height: 52px;
width: 500px;
padding-left: 0; // remove this
border-radius: 50px;
border: 1px solid #000000;
margin: auto;
display:block;
text-align:center !important;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
list-style: none;
display: block;
text-align: center;
}
#menu ul {
display: inline-block; // and set this
}
#menu li {
float: left;
display: inline;
position: relative;
}
#menu a {
display: block;
line-height: 50px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #000000;
background: #FFA6AF;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 52px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 50px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 170px;
background: #444444;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #FFFFFF;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #F2F2F2;
color: #444444;
}
You can use flex positions.
Use property justify-content : center to center all children div inside a parent div. It's useful to distribute the space between or around the elements.
This will also make your CSS code lighter. The more CSS, the more difficult it is.
It's also good for responsive design.
I have also removed some CSS property. This code can be further improved and reduced. Good luck !
#menu {
background: #000000;
background: linear-gradient(to bottom, #973F8E, #DC4069);
color: #FFF;
height: 52px;
width: 500px;
// padding-left: 18px;
border-radius: 50px;
border: 1px solid #000000;
margin: auto;
// display:block;
// text-align:center !important;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
// list-style: none;
// display: block;
text-align: center;
}
#menu ul {
width: 100%;
display: flex;
justify-content: center;
}
#menu li {
// float: left;
margin : 0px;
display: inline;
// position: relative;
}
#menu a {
display: block;
line-height: 51px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #000000;
background: #FFA6AF;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 52px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 50px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 170px;
background: #444444;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #FFFFFF;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #F2F2F2;
color: #444444;
}
<nav id="menu">
<input type='checkbox' id='responsive-menu' onclick='updatemenu()'><label></label>
<ul>
<li><a href='/'>DASHBOARD</a></li>
<li><a href='/model'>MODEL</a></li>
</ul>
</nav>
Here is my navbar right now (I outlined everything in black):
I want to make the logo and "About Services Contact" go in the center of the navbar vertically (not horizontally) and I don't understand how to do that and why my code hasn't made it like that already, here is my css for the navbar related stuff:
.nav {
width: 100%;
height: 65px;
position: fixed;
/* line-height: 10px; */
text-align: center;
border: 1px solid black;
}
.nav div.logo {
float: left;
width: auto;
/* height: auto; */
padding-left: 2rem;
/* padding-bottom: 3rem; */
border: 1px solid blue;
/* padding-bottom: 0px; */
}
.nav div.logo a {
text-decoration: none;
color: #fff;
font-size: 2.5rem;
}
.nav div.logo a:hover {
color: #00e676;
}
.nav div.main_list {
height: 65px;
float: right;
border: 1px solid purple;
}
.nav div.main_list ul {
width: 100%;
height: 65px;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav div.main_list ul li {
width: auto;
height: 65px;
padding: 0;
padding-right: 3rem;
}
.nav div.main_list ul li a {
text-decoration: none;
color: #fff;
line-height: 65px;
font-size: 2.4rem;
}
.nav div.main_list ul li a:hover {
color: #00e676;
}
.navTrigger {
display: none;
}
.nav {
padding-top: 20px;
/* padding-bottom: 20px; */
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
Here is the link to the codepen in which I got the navbar from if more info on the CSS is needed, the CSS is the exact same: https://codepen.io/albizan/pen/mMWdWZ
Just use following styles on the container:
<div class="container" style="display: flex;justify-content:center;">
it's my first year on coding and i'm doing this for a school Project. We have to do a responsive site and i'm already facing a problem when trying to add a navbar to my site. Whenever i add it, it just goes too much to the left and wont go in the middle. I tried searching google for help but none of them worked so thought i'd register here to ask. Thanks in advance!
body {
background: white none;
color: black;
/* jätetään ylämarginaalia navigointipalkin tilan verran */
margin-top: 0em;
/* jätetään vasempaan laitaan marginaalia saman verran kuin
laitaan tuleva linkkialue vie */
margin-left: 24.5%;
padding: 0.5em;
margin-right: 24.5%;
margin-top: 10
}
body {
background-image: url("8.jpg");
}
#logo {
margin-left: 0px;
margin-top: -180px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: Green;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #89F52B;
}
<ul>
<li>Etusivu</li>
<li>Pelit</li>
<li>Palaute</li>
<li>Yhteystiedot</li>
<li>Lomake</li>
</ul>
<div id="logo">
<img src=""/>
</div>
If you want your menu items centered inside the whole menu bar, just do as #Pete said:
li {
display: inline-block;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: Green;
text-align: center; <-----------
}
body {
background: white none;
color: black;
/* jätetään ylämarginaalia navigointipalkin tilan verran */
margin-top: 0em;
/* jätetään vasempaan laitaan marginaalia saman verran kuin
laitaan tuleva linkkialue vie */
margin-left: 24.5%;
padding: 0.5em;
margin-right: 24.5%;
margin-top: 10
}
body {
background-image: url("8.jpg");
}
#logo {
margin-left: 0px;
margin-top: -180px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: Green;
text-align: center;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #89F52B;
}
<ul>
<li>Etusivu</li>
<li>Pelit</li>
<li>Palaute</li>
<li>Yhteystiedot</li>
<li>Lomake</li>
</ul>
<div id="logo">
<img src=""/>
</div>
I'm trying to position the main content to the left and the nav to the right. Currently the nav is sitting at the bottom. Anyone tell me where I went wrong?
The Code (http://codepen.io/kiddigit/pen/PNXRVE)
* {
font-family: garamond;
line-height: 1.9em;
color: #212121;
}
.wrapper {
width: 75%;
margin: 0 auto;
border: 1px solid blue;
padding: 10px;
overflow: hidden;
}
.wrapper2{
overflow: scroll;
}
.main_content {
float: left;
}
.main_text {
float: left;
}
.nav {
float: right;
padding-top: 10px;
width: 25%;
}
header {
border-bottom: 5px solid;
margin-bottom: 10px;
overflow: hidden;
}
header ul {
list-style-type: none;
margin-top: 20px;
display: inline;
}
header li {
float: right;
margin-right: 20px;
width: 110px;
}
header li:first-child {
margin-right: 0;
}
header li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
header li a:hover {
background-color: #111;
color: white;
}
header h1 {
float: left;
text-align: left;
margin: 0 170px .5em 0;
line-height: 0;
font-size: 2em;
}
h1 a {
text-decoration: none;
color: black;
}
/*drop-down menu styles begin*/
.dropbtn {
color: black;
padding: 13px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
display: inline-block;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
color: white;
padding: 0 27.5px ;
text-decoration: none;
display: block;
background-color: #3f3f3f;
}
.dropdown-content a:hover {
color: #a9a9a9;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: black;
color: white;
}
/*drop-down menu styles end*/
/*Right nav content starts here*/
.nav li {
list-style-type:none;
font-size: 1em;
}
.nav ul {
padding-left: 10%;
font-size: 1em;
}
.nav ul a:link {
text-decoration: none;
color: black;
font-size: 1em;
}
.nav ul a:visited {
text-decoration: none;
color: black;
font-size: 1em;
}
.nav ul a:hover {
text-decoration: none;
background-color: black;
color: white;
padding:3px;
font-size: 1em;
}
/*Right nav ends here*/
Add width: 75%; to .main_content. It's a div so it will, by default take up 100% of its parent container.
You have .main-text but your element doesnt have that class. It has an id of main-text. Also, it should have a width, and .main_content shouldn't be floated:
http://codepen.io/anon/pen/eZbrPd
Floats are messy. Consider using inline-block instead:
http://codepen.io/anon/pen/dMweQe
I'm trying to make a dropdown menu on my website. I want to be able to click on a down arrow and have a menu pop up below it. Right now the menu only shows up part way on the screen.
Here's a picture to show what is going on now:
I would like to have the right side of the menu items lined up with the down arrow, instead of the left side like it is.
Here's the CSS that i'm using right now.
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background-image: url(bg.jpg);
background-position: center;
background-repeat: repeat;
}
#top {
background-color: #333;
height: 30px;
margin-bottom: 10px;
}
#menu {
color: #CCC;
height: 30px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
position: absolute;
}
#top_right {
height: 30px;
width: auto;
text-align: left;
float: right;
margin-right: 5px;
color: #CCC;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
}
.menu {
padding-left: 10px;
}
a.mlink:hover {
color: #FFF;
text-decoration: none;
}
a.mlink:link {
color: #CCC;
text-decoration: none;
}
a.mlink:visited {
color: #CCC;
text-decoration: none;
}
a.mlink:hover {
color: #FFF;
text-decoration: none;
}
a.mlink:active {
color: #CCC;
text-decoration: none;
}
#selected {
color: #6C0;
}
#content {
background-color: #CCC;
}
/*
START OF MENU TEST
*/
#esempio{
margin:0;
padding:0;
}
#esempio ul{
padding:0;
margin:0;
}
#esempio li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}
#esempio li a{
width:auto;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}
#esempio li a:hover{
background-color: #666;
}
#esempio ul ul{
position: absolute;
top: 30px;
width: 100px;
visibility: hidden;
}
#esempio ul li:hover ul{
visibility:visible;
}
/*
END OF MENU TEST
*/
The containing element needs to be positioned:
li {
position: relative;
}
Then your dropdown element can be positioned to be flush to the right of its container:
li .submenu {
position: absolute;
right: 0;
}
Without seeing markup, or an example of how your page operates, I cannot be much more specific.
Fiddle: http://jsfiddle.net/jonathansampson/CXbTX/
Sidenote
As an aside, I would avoid doing this:
* { margin: 0; padding: 0; border: 0 }
This will cause you some frustration down the line, especially when it comes to styling form elements and such. I would encourage you instead to use something that will normalize the CSS in a more intuitive manner, like Meyer's Reset.