I'm very new to coding and am working on a fictitious website for a restaurant. I can't seem to figure out how to remove the gap between my drop down menu and top navigation bar under the menu section. Ideally I would like the pink drop down box to be directly under the black nav bar. Any suggestions on what I have done wrong? I've played around with margins and padding everywhere. Even did a margin 0 and padding 0 at the start of my CSS page to see if that wold have an effect, it didn't.
Attached is my code for HMTL and CSS
body {
background-color: #41393d;
}
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: black;
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: black;
}
.logo_container {
height: 100%;
display: table;
float: left;
}
.logo {
height: 100%;
display: table-cell;
vertical-align: middle;
} /* Navigation */
.navigation {
float: right;
height: 100%;
} .navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 0px 20px;
position: relative;
}
a:hover {
color: #8a8c8f !important;
} .navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color:#BE1E2D;
font-family: athelas,
serif; font-style:normal;
text-decoration: none;
} .sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: #d4a18d;
} .navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
<!DOCTYPE html>
TOWN_Restaurant` <header>
<div class="header">
<div class="header_content">
<div class="logo_container">
<img alt="TOWN logo" id="image" class="logo" src="images/town_logo.png">
</div>`
<ul class="navigation">
<li>Home</li>
<li>Our Story</li>
<li>Menu
<div class="sub_menu1">
<ul>
<li>Cuisine</li>
<li>Beverages</li>
</ul>
</div>
</li>
<li>Contact</li>
<li>Reservations</li>
</ul>
</div>
</div>
</header>
The problem is that your nav <ul> has a margin of 16px for top and bottom while the height is 100% of the parent's height which is 50px so the total height of the <ul> is:
50px (parent's height) + 16px (margin-top) + 16px (margin-bottom) = 82px
and this is making it get out of the header which has a fixed height of 50px.
To get this fixed, you have to
1st: set your nav <ul>'s margin to 0 and use padding-top on the <li>s instead with their box-sizing value set to border box so that padding doesn't affect the height of the <li>s.
2nd: set the top of your "sub_menu1" to 100% (which is 50px in this case [the parent's height]) and this will get the the dropdown menu right beneath your navigation.
and here it is working:
body {
background-color: #41393d;
}
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: black;
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: black;
}
.logo_container {
height: 100%;
display: table;
float: left;
}
.logo {
height: 100%;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
}
a:hover {
color: #8a8c8f !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color: #BE1E2D;
font-family: athelas, serif;
font-style: normal;
text-decoration: none;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: #d4a18d;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
TOWN_Restaurant`
<header>
<div class="header">
<div class="header_content">
<div class="logo_container">
<img alt="TOWN logo" id="image" class="logo" src="images/town_logo.png">
</div>`
<ul class="navigation">
<li>Home</li>
<li>Our Story</li>
<li>Menu
<div class="sub_menu1">
<ul>
<li>Cuisine</li>
<li>Beverages</li>
</ul>
</div>
</li>
<li>Contact</li>
<li>Reservations</li>
</ul>
</div>
</div>
</header>
Related
I have been working to make a multi-level dropdown navbar, and when the dropdown finally started working, the rest of the navigation broke.
I'm trying to get a navbar with a width of 100% of the body, and then a container that is 80% of the body
#nav {
width: 100%;
background-color: red;
}
.container {
width: 80%;
}
However, after getting the dropdown to work, the background color of the nav (red) is no longer showing, and the grey area of the dropdown lists only spans across a much smaller area.
How can I get the dropdown/navigation lists to sit within the container (80% of body) while keeping the span all the way across the 100% width of the body? Note, the colors don't matter so much right now, just getting the right distance setup.
Here is a CodePen
And the snippet
#nav {
width: 100%;
background-color: red;
}
.container {
width: 80%;
}
.third-level-menu {
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li {
height: auto;
background: #999999;
}
.third-level-menu > li:hover {
background: #cccccc;
}
.second-level-menu {
z-index: 2;
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li {
position: relative;
height: 30px;
background: #999999;
}
.second-level-menu > li:hover {
background: #cccccc;
}
.top-level-menu {
list-style: none;
padding: 0;
margin: 0;
z-index: 2;
float: left;
line-height: normal;
text-align: center;
height: auto;
}
.top-level-menu > li {
display: inline-block;
position: relative;
float: left;
height: 30px;
width: 100px;
background: #999999;
}
.top-level-menu > li:hover {
background: #cccccc;
}
.top-level-menu li:hover > ul {
display: inline;
}
.top-level-menu a {
font: bold 14px Arial, Helvetica, sans-serif;
color: #ffffff;
text-decoration: none;
padding: 0 0 0 10px;
display: block;
line-height: 30px;
}
.top-level-menu a:hover {
color: #000000;
}
<nav id="nav">
<div class="container">
<ul class="top-level-menu">
<li>About</li>
<li>Services</li>
<li>
Offices
<ul class="second-level-menu">
<li>Chicago</li>
<li>Los Angeles</li>
<li>
New York
<ul class="third-level-menu">
<li>Information</li>
<li>Book a Meeting</li>
<li>Testimonials</li>
<li>Jobs</li>
</ul>
</li>
<li>Seattle</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</nav>
Change your CSS to look like this:
#nav{
position: absolute;
top: 0px;
left: 0px; // setting left and right to 0px will make the container take up the entire page
right: 0px;
background-color: red;
}
Also, if you want your elements in the navbar centred, add the following lines of code to your current stylesheet.
.container{
margin: 0 auto; // center the container
}
.top-level-menu{
width: 100%; // make the width of the menu 100% of the container
}
.top-level-menu li{
width: 25%; // make the width of each li element 25% of the container (100% / 4 li = 25%)
}
you need to clear float
.clearfix::after {
content: "";
clear: both;
display: table;
}
add clearfix class to top-level-menu
I am trying to make the top menu vertically center without assigning value like margin-top: 50px; because some of my friends say this is not the ideal approach.
/* Nav Section */
.nav {
width: 100%;
padding: 0;
margin: 0;
}
.nav-contain {
width: 1100px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.logo {
z-index: 10;
display: inline-block;
background: #2980B9;
padding: 65px 50px 35px 45px;
font-size: 36px;
line-height: 42px;
color: #fff;
text-align: center;
}
.logo a {
color: #FFFFFF;
text-decoration: none;
}
#medical {
display: block;
text-transform: uppercase;
}
.menu {
padding: 0;
margin: 0;
float: right;
display: table-cell;
position: relative;
}
.menu a {
text-decoration: none;
color: #505050;
font-weight: bold;
}
.menu ul {
padding: 0;
margin: 0;
float: left;
top: 50%;
}
.menu ul ul {
padding: 0;
margin: 0;
}
.menu ul li {
float: left;
display: block;
margin-left: 45px;
}
.menu ul ul {
position: absolute;
left: -999px;
}
.menu ul li:hover ul {
left: auto;
}
.menu ul li ul li {
margin-left: 0;
float: none;
margin-top: 15px;
}
<div class="nav">
<div class="nav-contain">
<div class="logo">
<span id="medical">Medical</span><span id="company"> Company</span>
</div>
<!-- Logo -->
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul class="dropdown">
<li>Sample</li>
<li>Sample</li>
</ul>
</li>
<li>Gallery</li>
<li>Prices</li>
<li>Contact</li>
</ul>
</div>
<!-- Menu -->
</div>
<!-- Nav Contain -->
</div>
<!-- Nav -->
Remove float:right on .menu, and set both .logo and .menu to this:
.logo, .menu {
display: inline-block;
vertical-align: middle;
}
If you need .menu to stay on far right side, also add this:
.nav-contain {
text-align: justify;
}
.nav-contain:after{
content: '';
display: inline-block;
width: 100%;
}
How it works:
Set text-align: justify; will line up the two inner inline blocks to the left and right edges of the container.
Create an invisible 100% width element by using :after or :before pseudo-element stretching the box to occupy the entire space of the container. Otherwise inline element occupies only the space bounded by the tags that define the inline element.
One easy way to center here is to use Flexbox:
.nav-contain {
/* what is already there */
display: flex;
align-items: center;
}
Beware of browser support (check caniuse.com to see if the compatibility level is acceptable to you).
This is superior to the margin-top solution as it ensures that you won't have to manually change that 50px each time the size of the image or anything else in the navbar changes.
Try:
.menu > ul > li {
min-height:50px;
display: table;
}
.menu > ul > li > a {
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/rawat/4h05rq2s/
Since your navbar remains the same height the whole time, I suggest you give the .nav-contain the following code:
.nav-contain {
width: 1100px;
margin: 0 auto;
line-height: 184px;
padding: 0;
overflow: hidden;
}
Note the line-height.
This will, once you smaller the available width of your device, result in a probably not so nice looking huge navigation bar. For this, I suggest media queries.
So, I have a navigation bar and then an <ul> which has some <li>inside. I want it to be vertically aligned with the navigation bar .navbar but it seems it's not working. Do anyone have andy idea what am I doing wrong?
Here is the fiddle and code: http://jsfiddle.net/x7EAg/2/
<style>
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}
</style>
<nav class="navbar" role="navigation">
<div class="container">
<div class="logo-holder"></div>
<ul class="sections">
<li>Shop</li>
<li>Team</li>
<li>Events</li>
<li>Experience</li>
<li>Company</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Thank you!
If I understand what you are trying to achieve. Then you should make the logo absolutely positioned and then aligning the ul can be done with line-height. Full css:
.navbar {
width: 100%;
height: 90px;
line-height:90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
position: absolute;
top:0;
left:0;
background-repeat: no-repeat;
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
}
And updated fiddle
i changed the display of your logo-holder to inline-block and then set vertical-align:middle
now it appears next to the logo, and vertically centered.
see here for a fiddle http://jsfiddle.net/gaurav5430/x7EAg/3/
this is the complete css:
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
display:inline-block;
vertical-align:middle;
}
.navbar .sections {
display:inline-block;
vertical-align:middle;
list-style: none;
margin:0px;
padding:0px;
background:#aaa;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}
What I believe is going on is your logo is pushing your ul down. like was mentioned above. You may want to float your logo-holder class left. That would allow you to position your li as you needed. Line-height is a way to do this, you could also use margin, padding, or absolute position for your li as needed. Good luck.
I have a vertical navigation menu, with a picture next to it. So now the navigation menu and the pic are vertically aligned to the top. I want it to be bottom, like, the navigation menu to vertically finish at the same point where the image does. How do I go about doing this with using absolute positioning?
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Portfolio</li>
<li>Reviews</li>
</ul>
<img src="pic.jpg">
CSS:
ul {
float: left;
text-align: right;
}
ul li {
padding-top: 5px;
}
ul li a {
background: yellow;
display: inline-block;
padding: 10px 35px;
font-size: 20px;
}
img {
width: 230px;
height: auto;
float: left;
}
I don't want to use absolute positions, because the image is supposed to interconnect with the navigation menu (It's supposed to be a png picture of a guy with the buttons coming from behind him) so I'm worried it might mess things up if someone had a different font sizing in their browser.
You can use display: table; to achieve this.
Create a wrapping element for the ul and img and give it display: table;. ul and img should have display: table-cell; vertical-align: bottom; then. You don't need float: left; on ul or img either if you do it this way.
Demo: http://jsfiddle.net/xq6SY/
HTML
<div class="wrapper">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li>Portfolio
</li>
<li>Reviews
</li>
</ul>
<img src="pic.jpg">
</div>
CSS
.wrapper {
display: table;
}
ul {
display: table-cell;
text-align: right;
vertical-align: bottom;
}
ul li {
padding-top: 5px;
}
ul li a {
background: yellow;
display: inline-block;
padding: 10px 35px;
font-size: 20px;
}
img {
width: 300px;
height: auto;
display: table-cell;
vertical-align: bottom;
}
try this code even though I pressed it to the bottom of the screen)) DEMO
<div class="page-wrap">
</div>
<footer class="site-footer">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Portfolio</li>
<li>Reviews</li>
</ul>
<img src="http://placehold.it/350x300">
</footer>
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
/*height: 142px; */
}
.site-footer {
background: white;
}
ul {
/*float: left;*/
text-align: right;
display:inline-block;
}
ul li {
padding-top: 5px;
}
ul li a {
background: yellow;
display: inline-block;
padding: 10px 35px;
font-size: 20px;
}
img {
width: 230px;
height: auto;
display:inline-block;
vertical-align:bottom;
}
You can do this:
fiddle
css
ul, img { display:inline-block; vertical-align:bottom;}
** Important: Don't forget to remove your floats, and add padding:0; margin:0; to your UL.
(look at the fiddle)
Aligning things vertically seems like a dark art. This is a section of my currect sites code (specifically, the header). The site is coded like this to do with the footer being docked to the bottom of the page.
HTML:
<div id="header-wrap" class="full_width">
<div id="header-container" class="dc1">
<div id="header" class="thin_width rel">
<img src="/static/img/header.jpg" id="logo" alt="coming soon" title="coming soon">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div>
</div>
CSS:
#header-wrap { top: 0; left: 0; }
#header-container { height: 60px; border-bottom: 1px solid #E5E5E5; }
#header { margin: 0 auto; }
#header h1 { color: #beffbf; text-align: left; width: 290px; margin: 0; position: absolute; left: 0; top: 20px; }
#header h1 em { color: #90b874; font-size: small; display: block; }
#header ul { margin: 0; padding: 0; list-style: none; position: absolute; top: 35px; right: 0; }
#header ul li { float: left; margin-right: 5px; }
#header ul li a{ color: #90b874; font-weight: bold; font-size: 1.4em; margin-right: 5px; text-decoration: none; }
#header ul li a:hover { color: #beffbf; }
.dc1 { background-color: #FFFFFF; }
.rel { position: relative; }
.full_width { width: 100%; }
.thin_width { width: 450px; }
Here's a JSFiddle Exmple
How should I go about trying to vertically align the links on the right and the logo?
I would like to try and do this without using fixed padding since it makes it a pain if I ever update the logo or link height.
So, what is the correct way to vertically align in this circumstance?
display:table-cell works well for this
#header-wrap { top: 0; left: 0; }
#header-container { height: 60px; border-bottom: 1px solid #E5E5E5; display:table-cell; vertical-align:middle; }
#header { margin:0 auto; overflow:auto;}
Check the demo http://jsfiddle.net/AHsBN/2/
All you need to do is set element.style
#header ul { top:0;} and #header { position: relative;}
This is my solution, no positioning, heights and such are needed, just adjust the vertical-align as you wish to either, top, middle, bottom or baseline etc (I used height: 300px for #header-container to more easily illustrate vertical-align: middle;
#header > a { background: red; }
ul { background: green; }
#header-container { background: blue; height: 300px; }
#header > a, ul { display: block; }
li { display: inline-block; }
#header > a { float: left; }
ul { float: right; font-size: 200%; }
#header-container { display: table; width: 100%; }
#header { display: table-cell; vertical-align: middle; }
Also no need to clear the floats as its within a CSS table.
HTML
<div id="header">
<img src="http://www.google.co.in/images/srpr/logo3w.png" alt="">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
CSS
#header { position: relative; background: #ddd; }
#header a.logo {display: inline-block; vertical-align: middle; *display: inline; zoom: 1;}
#header ul { display: inline-block; vertical-align: middle; *display: inline; zoom: 1; position: absolute; right: 0px; top: 50%; height: 20px;}
#header ul li { display: inline; position: relative; top: -50%; }
Example: http://jsfiddle.net/gZceQ/4/
Code above should work in all browsers :)