^^^
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;
}
Related
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
I was wondering if this is possible with ONLY css.
I have a logo container that is positioned absolute. Since this logo can be any width and height it's positioned this way. Next to the logo div I have a navigation div. This element is positioned relative. Is there any way to keep the navigation exactly next to the logo div when that can have any width?
<div class="logo">
<img src="logo.png" class="img-responsive">
</div>
<div class="navigation">
<ul>
<li>....</li>
// etc etc....
</ul>
</div>
CSS
.logo {
min-height: 80px;
padding: 10px 0;
position: absolute;
max-width: 330px;
}
.nav-wrap {
position:relative
background: #ffffff;
float:left;
width:100%;
}
So what I tried is to use calc() but that doesn't work since you can't do something like(???)
calc(100% - (.logo))
I guess display:table won't work because there's an absolute element.
I can use jQuery but that would create a jumpy effect on the navigation.
So the question:
When a div can have any width and is p[ositioned absolute, how can you position an other div right next to it?
Any help greatly appreciated.
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 task that I initially thought would be easy, but turned out to be quite difficult. I want to be able to detect the height of the current visible window, center some text in that section of visible window, and place a navigation bar at just the end of the window, so a graphic of what it would look the following:
I have tried various ways of doing this, including setting the height of a div to a certain vh level and centering text inside that dif, though that was quite problematic, as vh is not supported in ie 8 and in order to center the text inside the div, many sources told me to do position: absolute, which tended to shift the text to a corner, which I did not want.
Is there a way in which I can create such a display? If I worded anything incorrectly or posted in the wrong place, please let me know. Thanks in advance for any help.
edit: here is the code I am using: http://pastelink.me/dl/b3cb50
Also some snippets of code for clarification:
what I do is I have a div with height of 100vh and width of 100% and an h1 with an id of myTitle (the css for id myTitle just sets the text-align to center)
<div style="height: 100vh; width: 100%"><h1 id="myTitle"> This is a large title!</h1></div>
and a nav bar directly below it, using foundation's nav bar code:
<nav class="top-bar" id="myNav" data-topbar>
<ul class="title-area">
<li class="name"><h1>My Site</h1></li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section"> <!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
EDIT: Many answers were said regarding setting the position of the nav bar to the bottom, and I thank you for that, though I forgot to clarify one thing. I would like for the nav bar to only be at the bottom initially, and when someone scrolls down it moves up, and does not stay fixed to the bottom.
find
<div class="navbar navbar-fixed-top">
...
</div>
and change it to
<div class="navbar navbar-fixed-bottom">
...
</div>
bootstrap has a fixed top and bottom selectors :)
JSBIN
Is this what you need? A table is the most supported method for vertical align in CSS.
.table {
display: table;
min-height: 100vh; width: 100%;
}
.table div {
display: table-row;
}
.header {
height: 90px;
background: #ddd;
}
.header h1 {
text-align: center;
}
.content p {
padding: 0 1em;
display: table-cell;
vertical-align: middle;
}
.footer {
height: 220px;
background: #ddd;
}
How can we create a navbar similar to the one on Twitter Boostrap's website? The navbar is black, and more importantly is centered in the middle of the page. The alignment of the links seem to be too high too.
The navbar created using the code below is aligned to the left. How do you get it to be centered with a max width like on Twitter Bootstrap's website.
Target navbar
Attempt
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">Bootstrap</a>
<ul class="nav">
<li class="active">Home</li>
<li>Get Started</li>
<li>Scaffolding</li>
</ul>
</div>
</div>
one nice technique i like for aligning the links always to the center is to use line-height:
.navbar-inner { height: 60px; }
.nav { line-height: 60px; }
make it the same as the height of the container div, whether this is placed on .navbar-inner or .nav is your call. but it will make the text of the links always vertically aligned in the middle.
Using the bootstrap framework, .navbar-inner should have the same css applied to it as .container or .container-fluid (depending on if you are using the fluid layout or not). For non-fluid layouts this means the following rules:
.navbar-inner {
margin: 0 auto;
width: 1140px; /* or whatever width you choose for your .container */
}
fluid layouts this means:
.navbar-inner {
padding: 0 20px;
}
You need to put everything inside the navbar-inner inside a <div class="container">.