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
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.
^^^
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've been trying to create a navigation bar that meets the following criteria:
Spans 15% height.
Spans 100% width.
Navigation bar is aligned to the top of the site.
Elements within the navigation bar are vertically centered within it.
The last menu option is aligned to the far right of the navigation bar.
I've been playing with <div> and <ul> to implement the elements. I've spent a lot of time on it and researched it. I can't seem to find a way to vertically center the elements, which are images, if I use a percentage height. I assume this issue is because the <header> and <nav> elements are block elements, as is the div element, being that "vertical-align" only works on inline elements.
Questions, for those wise enough to provide what are probably easy answers:
Can I use "vertical-align" on block elements if I override the "display" element to the "inline" value? It seems like the answer is negative.
Can I right-align one <li> within a <ul> while the other <li> are left-aligned?
The only way I can get it to work is to use fixed height values on the navigation bar as well as padding around the elements. Is that my only option or does anyone know of a way I can make it work with a percentage height?
Basic code to express what I'd like to do (assuming all the <html> and other foundational tags are there, too; and I am aware the code below doesn't work but it shows the basic idea):
<style>
html, body {
height: 100%;
width: 100%;
}
.menu_bar {
display: inline; /* This element seems to mess things up pretty bad so I assume I can't do it
that way. I was only using it so my <ul> would be within an inline element which would allow me
to use vertical-align. */
height: 15%;
width: 100%;
background-color: #000000;
}
.menu_items {
height: 100%;
width: 100%;
}
.menu_logo {
vertical-align: middle;
text-align: left;
}
.menu_option1 {
vertical-align: middle;
text-align: left;
}
.menu_option2 {
vertical-align: middle;
text-align: left;
}
.menu_option3 {
vertical-align: middle;
text-align: right;
}
</style>
<body>
<header>
<nav>
<div class="menu_bar">
<ul class="menu_items">
<li class="menu_logo"><img src="images/logo.gif"></li>
<li class="menu_option1"><img src="images/option1.gif"></li>
<li class="menu_option2"><img src="images/option2.gif"></li>
<li class="menu_option3"><img src="images/option3.gif"></li>
</ul>
</div>
</nav>
</header>
</body>
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.
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.