I'm trying to vertically align a logo and UL within a navigation bar. I've got pretty close and it looks fine really, however there is some extra space underneath and above them both that I can't account for. I've set the padding on the links and logo to allow the user to be able to click them more easily.
Place the mouse underneath the logo and underneath the nav bar, I've tried to do it so that as soon as your mouse reaches the nav bar, it hits the padding of the logo and therefore the mouse cursor turns to pointer. However, there is a gap there...using the developer tools, I can see that it's the div.inner element...but it says it has a margin. I've tried setting the margin to 0 on that div and it doesn't go away.
Here is the jsfiddle example: http://jsfiddle.net/Forresty/0smpmsqn/2/
I'm using the same vertical alignment method as here: http://webdesign.tutsplus.com/tutorials/the-holy-grail-of-css-centering--cms-22114
Here is the HTML:
<nav>
<div class="outer">
<div class="inner">
<div class="logo1">LOGO</div>
<ul>
<li>About</li>
<li>My Work</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Any help would be greatly appreciated. Or even if it's not possible to get rid of that extra space, an explanation of why it's there would be great.
Thanks in advance.
Remove
Display: table-cell;
To align in the middle use
line-height | Margin | Padding
The display table cell add's the space
You can change the following:
.outer {
display: table;
width: 100%;
height: 100%;
padding: 0;/*set padding to 0*/
}
.logo1 {
display: inline-block;
font-family: dan_custom-font;
font-size: 2em;
float: left;
margin: 0.3em;/*replace padding with margin*/
margin-left: 0.7em;/*set a bit more margin left*/
cursor: pointer;
color: #de1b1b;
text-align: center;
-webkit-transition: color .3s;
transition: color .3s;
}
fiddle
You can set .outer class padding: 0 and replace margin with padding in .logo1.
You have many options.
Adjust the height of the nav so that it fit the logo and ul.
Adjust the padding of the logo and ul so that it fits the nav.
To see whether they fit, first set a background color for logo and the ul and check.
Related
I have a brand-logo in my navbar and to make it fit and look good, I had to increase the height of my navbar. However, after doing so the nav links stay in the position as if the height never changed. To fix that I had to add a margin to the ul tag. Even though that did push down the links enough, the hover effect does not extend to surround the full height of the navbar. How do i fix this?
html:
<nav class="deep-orange darken-2">
<div class="nav-wrapper container">
<a class="brand-logo" href=""><img src="logo.png" alt=""></a>
<ul class="hide-on-med-and-down right nav-links">
<li>Home</li>
<li>Admission</li>
<li>Mentors</li>
<li>Location</li>
</ul>
</div>
</nav>
css:
.brand-logo img {
height: 95px;
}
nav {
height: 100px;
}
.nav-links {
margin-top: 15px;
}
Ok, quick answer is line-height:
nav {
height: 100px;
}
nav ul li,
nav ul li a,
.brand-logo {
line-height: 100px;
}
https://codepen.io/doughballs/pen/vYNGGYW
Materialize nav links all get their spacing via line height, which is passed down from nav height, and when you chnage the height manually with CSS , you also need to change the line height.
Also - Materialize has two nav heights, mobile and above, and they are set at certain breakpoints. The absolute best way to do this si suing sass - you change the height of the nav once, and then all the line heights are updated from this one variable.
If this is something you're interested in, let me know and I'll update the pen.
You don't need to do anything crazy with margins - use the same conventions that Materialize uses.
I have a logo on the top left of my website which links to the home page. Some areas of the image aren't clickable. The areas that can be clicked work fine. The clickable/non-clickable areas seem to be dispersed randomly. How can I make the link work across the entire area of the logo?
<header>
<nav>
<a id="nav-logo" href="index.html">
<img src="img/logo-header.png" alt="logo" />
</a>
</nav>
</header>
#nav-logo,
nav img{
display: inline-block;
float: left;
height: 65px;
margin: 5px;
cursor: pointer;
}
Try this
#nav-logo { display: block; }
Most likely it's the margin which isn't clickable. Also, you are using the same CSS settings for the link AND the image, which doesn't really make sense (both floated and inline-blocks, both have a margin etc.). Make the image display: block, define a width for the container, make the image width 100% and its height auto
^^^
This doesn't solve my question my situation is different, because of the animated css navigation button. Can get it work like that: display: table-cell and vertical-align: middle; etc.
I have a responsive header that shows a navigation button when in mobile size where you can show the rest of the menu items (disabled in example don't need it for my question).
Because i going to make the header responsive in height it is beter that the navigation button is always centered vertical. Now it is placed in the center with a top margin of 20px and because the button is 20px in height and the header is 60px it is centered, but that won't work if the header height changes responsively.
--> FIDDLE
Code:
<header>
<nav>
<div class="col-nav">
<span class="nav-icon"></span>
Name
</div>
<ul>
<li class="col-nav">Item1</li>
<li class="col-nav">Item2</li>
<li class="col-nav">Item2</li>
</ul>
</nav>
</header>
If you can set it's parent's position to relative then you might be able to use
position: relative;
top: 50%;
transform: translateY(-50%);
on the button
You can try like this DEMO Just changed margin value
CSS:
.nav-icon {
position: relative;
margin-top: 7px;
}
I am facing a weird problem. I have an un-ordered list of images. List has 4 Items. I want to include it in responsive page and all I want is that all items should have a 25% width and the list itself should span the width of whole screen. Well it all sounds easy and straight-forward but for some odd reason I can't assign 25% width to the list-items and only three items accommodate in one line if I assign width:25%.
If I reduce the width to 24.4% the items are in line. But then again weirdly when I resize browser one of the item goes into 2nd line.
I am using Google chrome. Here is the HTML:
<ul class="imgs">
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
</ul>
Here is the CSS:
.imgs {
width: 100%;
list-style: none;
margin: auto;
padding:0px;
}
.imgs li {
width: 24.4%;
margin: 0px !important;
padding: 0px !important;
display: inline-block;
}
And here is the Fiddle Demo:
http://jsfiddle.net/7HXw7/2/
WIth inline-bock elements, the browser will interpret the space between the li's as actual spaces and that's why your elements aren't lining up. If you just remove the space, it'll line up. See code:
<ul class="imgs"><li>aaaa</li><li>bbbb</li><li>cccc</li><li>dddd</li></ul>
Or the fiddle, here: http://jsfiddle.net/dgvc9/
Alternately, if you find this as annoying as would think you do, you can make the li's block elements and float them left.
See alternate fiddle: http://jsfiddle.net/8Gxvd/
Try adding:
float: left;
to .imgs li
Fiddle
I have a navigation bar which consists of two parts. The left area, which is where the actual links are. And the right area, which is were a search box will display.
The left area is fluid, while the right area has a fixed width.
What I'm trying to figure out is how to set the padding on my navigation links so that it will use up the full fluid width of the left area. (The navigation links are buttons with a hover effect, I would like them to cover the full navigation bar regardless of it's width)
See the example below
What I'm trying to do (fluid/percentage based padding based on bar width)
width 300px
|========================================|========|
|---Link------Link------Link------Link---| Search |
|========================================|========|
width 400px
- padding on Links automatically adjusts to fill the bar
|================================================|========|
|----Link--------Link--------Link--------Link----| Search |
|================================================|========|
How would I go about achieving this? I've tried messing with padding percentages but I can't seem to get it to work as desired. Are padding percentages even the best way to go about this?
Depending on what support level you desire, you could use flexboxes.
I'll just assume you want to support older browsers, tho, where the best solution is propably a normal 2 column layout, with the links inside the left column getting a percentage width (25% in your example) and propably a min-width.
Heres a working fiddle. I made the main box resizeable for easier demonstration.
reduce the width of the container with padding and absolutely position the search box inside the padding. Here's an example on jsbin
HTML (note that some whitespace has been deliberately removed so that there aren't text nodes taking up space.):
<nav class="">
<div class="nav-link-container">
<div class="nav-link"><a >link</a>
</div><div class="nav-link"><a >link</a>
</div><div class="nav-link"><a >link</a>
</div><div class="nav-link"><a >link</a>
</div>
</div><div class="search-box-container">
<input class="search-box" placeholder="search">
</div>
</nav>
CSS:
nav {
padding-right: 220px;
position: relative;
background: lightblue;
line-height: 1.5em;
}
.nav-link-container {
display: inline-block;
width: 100%;
text-align: center;
}
.nav-link {
display: inline-block;
width: 25%;
outline: 1px dashed grey;
}
.search-box-container {
position: absolute;
right: 0;
top:0;
width: 210px;
display: inline-block;
}
.search-box {
width: 200px;
border-radius: 5px;
border: 1px solid lightgrey;
padding-left: 5px
}
NB: I've only used outline to show where the links are, you wouldn't do that in practise.