I'm trying to remove some white space on the left of a fixed top menu ul but I'm stuck, I already searched and put this:
#nav li {
list-style: none;
display: inline-block;
}
I want to put all the list at the left (like left: 0?), but something is producing some white space on the left of the first list item.
Why is this happening, and how can I remove it?
Here is the code (fiddle):
#contenedormenu {
background-color: #FFFFFF;
width: 100%;
position: fixed;
top: 0px;
box-shadow: 0px 1px 2px #888;
height: 40px;
z-index: 1;
}
#menu {
width: 100%;
height: 40px;
position: fixed;
top: 0px;
}
#nav {
width: 100%;
height: 40px;
top: 0px;
position: fixed;
margin-top: 0px;
}
#nav li {
margin-top: 10px;
list-style: none;
display: inline-block;
}
#nav li a {
color: #5D5D5D;
font-family: Lobster, Arial, sans-serif;
font-size: 16px;
padding: 10px 5px 12px 5px;
text-decoration: none;
text-shadow: rgba(255, 255, 255, 0.6) 1px 1px 0;
}
#nav a:hover {
background-color: #f15a24;
color: white;
text-shadow: none;
}
<div id="contenedormenu">
<div id="menu">
<ul id="nav">
<li id="inicio">
Home
</li>
<li id="item1">
Menu item 2
</li>
<li id="item2">
Menu Item 3
</li>
</ul>
</div>
</div>
DEMO
As you code padding: 0; to the #nav
add padding:0; and margin:0 to the <ul>.
With <ul> tag set:
font-size: 0px;
With <li> tag set:
font-size: 14px; /*or custom*/
Other solution: https://davidwalsh.name/remove-whitespace-inline-block
Add padding: 0; to the <ul>.
By default ul have some margin and padding property due to that it apply. If we need to remove those then we need to apply below condition
ul {
margin:0;
padding: 0;
}
Related
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed last year.
There's a small space in the left side of the navigation bar. I just can't get it off and I'm kinda mad. Somebody have ideas for this? Or is it just my device's size?
<div class="bar">
<ul>
<li> CANCEL CUSTOM ORDER </li>
<li> DRAFTS </li>
<li> FEEDBACK </li>
</ul>
</div>
CSS:
div.bar {
position: sticky;
}
div.bar ul {
width: 110%;
height: 40px;
background-color: #a3b5c0;
border-bottom: 1px solid #96abb9;
border-top: 1px solid #96abb9;
text-align: center;
margin: 0;
}
div.bar li {
display: inline-block;
font-size: 20px;
font-family: 'Questrial';
text-decoration: none;
list-style-type: none;
}
div.bar li a {
color: #efefef;
text-decoration: none;
padding: 0px 80px 20px 80px;
}
div.bar li a:hover:not(#active) {
background-color: #8dbbc5;
transform: scale(1.5);
}
use this only add body and remove 100% from div.bar ul:
body {
margin: 0;
width: 100%;
}
div.bar {
position: sticky;
}
div.bar ul {
height: 40px;
background-color: #a3b5c0;
border-bottom: 1px solid #96abb9;
border-top: 1px solid #96abb9;
text-align: center;
margin: 0;
}
div.bar li {
display: inline-block;
font-size: 20px;
font-family: 'Questrial';
text-decoration: none;
list-style-type: none;
}
div.bar li a {
color: #efefef;
text-decoration: none;
padding: 0px 80px 20px 80px;
}
div.bar li a:hover:not(#active) {
background-color: #8dbbc5;
transform: scale(1.5);
}
<div class="bar">
<ul>
<li> CANCEL CUSTOM ORDER </li>
<li> DRAFTS </li>
<li> FEEDBACK </li>
</ul>
</div>
body {
margin:0px;
padding:0px;
position: sticky;
}
I am trying to make a dropdown-menu. So for this purpose, I've created a div and some anchor links inside, but the display: block; is not working. The cursor is default & the anchor does not seem to be a link.
Here is my HTML:
<div id="custom-wrapper">
<ul>
<li>View full profile</li>
<li>Logout</li>
</ul>
</div>
The CSS:
div#custom-wrapper
{
width: 200px;
height: auto;
position: fixed;
right: 15px;
top: 38px;
border-radius: 6px;
background: #fff;
border: 1px solid lightgrey;
}
div#custom-wrapper ul
{
list-style-type: none;
}
div#custom-wrapper ul li
{
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
}
div#custom-wrapper ul li a
{
text-decoration: none;
display: block;
color: grey;
font-family: sans-serif;
border-bottom: 1px solid lightgrey;
}
What's wrong with my code?
Display block element works perfect, Just you need to remove padding and margin for ul element.
/*** Default CSS Attributes ***/
#custom-wrapper ul {
margin: 0;
padding: 0;
}
/*** Overwrite CSS Attributes ***/
#custom-wrapper ul {
margin: 0 !important;
padding: 0 !important;
}
div#custom-wrapper {
width: 200px;
height: auto;
position: fixed;
right: 15px;
top: 38px;
border-radius: 6px;
background: #fff;
border: 1px solid lightgrey;
}
div#custom-wrapper ul {
list-style-type: none;
margin: 0;
padding: 0;
}
div#custom-wrapper ul li {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
}
div#custom-wrapper ul li a {
text-decoration: none;
display: block;
color: grey;
font-family: sans-serif;
border-bottom: 1px solid lightgrey;
}
<div id="custom-wrapper">
<ul>
<li>View full profile</li>
<li>Logout</li>
</ul>
</div>
There is a padding for ul. Remove it:
div#custom-wrapper ul
{
list-style-type: none;
padding:0;
}
That is not the right way to build a dropdown. Check this (you would need to include Bootstrap library though, which by the way may make your life much easier).
So I've created menu on my website, but when I resize windows it is going into other divs in same line. I tried various things but I didn't had any luck. My nav for menu is in another div for header with 2 more divs, for left, and right. I also pasted CSS of those stuff down there, they have class .icons and .logo, and main holder with .menuHolder.
Code
#primary_nav_wrap {
margin: 0.85% 0% 0% 26%;
width: 60%;
padding: 10px;
position: absolute;
min-width: 772px;
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul a {
display: block;
color: #333;
text-decoration: none;
font-weight: 700;
font-size: 12px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul li:hover {
background: #ddd;
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover > ul {
display: block
}
.icons {
float: right;
margin-top: 1.3%;
margin-right: 1.57%;
position: apsolute;
min-width: 53px;
}
.logo {
float: left;
position: apsolute;
/* min-width */
}
.menuHolder {
background-color: #fff;
width: 100%;
text-align: center;
margin: 0px auto;
padding: 0;
border-style: solid;
border-color: #CC0000;
border-width: 1px 0px 2px 0px;
height: 83px;
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Index
</li>
<li>Blahblah
<ul>
<li>Blahblah2
</li>
<li>Blahblah3
</li>
<li>Blahblah4
</li>
</ul>
</li>
<li>Blahblah5
</li>
<li>Blahblah6
</li>
<li>Vaša pitanja i odgovori
<ul>
<li>Blahblah7
</li>
<li>Blahblah8
</li>
</ul>
</li>
<li>Blahblah9
</li>
<li>Blahblah10
</li>
<li>Blahblah11
</li>
</ul>
</nav>
if you want to adjust to the width of the window on window size change you have to use SASS, LESS and bootstarp. when you resize the window all that css needs to be rendered again so you would need to literally write a compiler for css and part of the bootstrap manually! therefore using bootstrap and media query would be easier and they are easy to learn.
It also adds value to you as a programmer.
Here's a nav I use on my web page. I set up a side bar to place my menu's in. It stays the same size whenever I resize my page. It might be a starting place for you.
nav {
position: fixed;
left: 0;
top: 0;
bottom: 0;
background: #E5E4E2;
width:275px;
padding: 10px;
}
In my set up I have my navigation bar set horizontally and contained within my header div like this:
<div id="header-section">
<div id="main-menu-wrapper">
<ul id="main-menu">
<li>Home</li>
<li>Services
<ul id="sub-men">
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
My problem is that the sub-menu is not showing because the height on "main-menu-wrapper" is set to auto. The sub-menu is showing when I set a height like 100px. When I set the position on the sub-menu to static instead of absolute, it expands the entire main-menu-wrapper. How can I get the sub-menu to show properly?
Here's the CSS portion for my whole header section:
#header-section {
position: relative;
width: 100%;
padding: 5px 0px;
background: #740600;
}
#main-menu-wrapper {
position: relative;
width: 74%;
min-width: 600px;
height: auto;
margin: 0% auto;
}
#main-menu {
list-style: none;
font-weight: bold;
line-height: 150%;
}
#main-menu li {
position: relative;
float: right;
margin: 0px 5px;
}
#main-menu a {
padding: 3px;
color: #ffffff;
background: #740600;
text-decoration: none;
border-radius: 5px;
}
#main-menu a:hover {
padding: 3px;
color: #740600;
background: #ffffff;
text-decoration: none;
}
#main-menu li ul {
position: absolute;
display: none;
}
#main-menu li ul li{
float: none;
}
#main-menu li:hover ul {
display: block;
}
#main-menu li ul a {
padding: 3px;
color: #ccc;
background: #740600;
text-decoration: none;
border-radius: 5px;
}
#main-menu li ul a:hover {
padding: 3px;
color: #740600;
background: #ccc;
text-decoration: none;
}
#banner-wrapper {
position: relative;
padding: 5px 0 5px;
}
#banner {
position: relative;
max-width: 75%;
min-width: 600px;
margin: 0% auto;
background: #ffffff;
}
#logo {
max-width: 600px;
height: auto;
}
I'm a little confused by what you're asking here, but I created a fiddle where your menu shows.
I deleted the styles for #main-menu-wrapper and I removed the background color on #header-section.
Hopefully this can be a decent starting point for you: http://jsfiddle.net/44vRN/
#header-section {
position: relative;
width: 100%;
padding: 5px 0px;
}
You could try to use absolute positioning on the submenu to remove it from the document flow.
I had a mouseover submenu working very nicely on my site (so nicely in fact that it was working exactly right in Chrome, IE 7 & 8, and FF), but now it's broken somehow and I can't see the problem.
Here's the CSS:
.MainMenu {
width: 90% !important;
min-width: 800px;
height: 42px !important;
padding: 0 0 0 10%;
overflow: hidden;
border-top: 1px solid #0054a6;
border-bottom: 1px solid #0054a6;
background: transparent url("Images/ServiceMenuBG.png");
background-repeat: repeat-x;
}
.MainMenu ul {
padding: 0;
margin:0;
list-style: none;
}
.MainMenu li {
float: left;
position: relative;
height: 31px;
width: 150px;
padding: 11px 0 0 0;
text-align: center;
border-right: 1px solid #0054a6;
}
.MainMenuItem#First { border-left: 1px solid #0054a6; }
.MainMenuItem a {
color: #ffffff;
display: block;
height: 31px;
width: 150px;
font-weight: bold;
text-decoration: none;
}
.MainMenuItem:hover { background: transparent url("Images/ServiceMenuBG.png") repeat-x 0 -42px; }
.SubMenu {
z-index: 500;
display: none;
width: 150px !important;
position: absolute;
top: 10px;
left: 0;
background-color: rgb(51,118,184);
}
.SubMenu li { padding: 0 0 2px 5px; height: 20px !important; width: 143px; }
.SubMenu li a {
height: 20px !important;
font-weight: normal;
color: #ffffff;
text-align: left;
text-decoration: none;
}
.SubMenu li a:hover { text-decoration: underline; }
.MainMenu li.MainMenuItem>ul { top: auto; left: auto; }
.MainMenu li.MainMenuItem:hover ul { display: block; }'
Here's the HTML:
<div class="MainMenu">
<ul>
<li class="MainMenuItem" id="First">Home</li>
<li class="MainMenuItem">Philosophies</li>
<li class="MainMenuItem">Services
<ul class="SubMenu">
<li id="TopItem">Shop Repair</li>
<li>Donations</li>
<li>Consulting</li>
<li id="BottomItem">On-site Service</li>
</ul>
</li>
<li class="MainMenuItem">Contracts</li>
<li class="MainMenuItem">About Us</li>
<li class="MainMenuItem">Contact Us</li>
</ul>
</div>
The SubMenu doesn't display either on mouseover or if I set it's initial display property to block. It's as if it doesn't exist on the page at all.
Thanks in advance for any help.
.MainMenu { overflow: hidden; }
is hiding the sub menus, so remove that line. Line 6 in your CSS.
As Sotiris mentioned
.MainMenuItem a { color: #ffffff; }
hides the top menu items (maybe not on your version because I see you have a background image)