Problem with aligning text in nav bar
Hi there
i have a problem with aligning my text in a navigation bar. I need the last text to move to the right of the bar so it stays with my search bar, and the other to stay on the left
But Im having issues getting this done, any help maybe?
You can use flex for this and just apply "margin-left: auto" to the last list item. Note that I got the basic layout (nav to the left and search to the right with flex (using flex-grow and flex-shrink repsectively).
The inside the nav - applying the flex styling to layout the list items and then on the :last-child using margin-left to force it to the right away from teh other list items.
UPDATE - following comments from OP - have amended it to have a second nav-list to the right of the search input. Much easier to split the list than trying to get the layout using float etc.
header {
display: flex;
align-items: center;
}
nav {
flex-grow: 1
}
.nav-list {
display: flex;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
}
.nav-list li {
padding: 4px 16px;
}
.search-wrapper {
flex-shrink: 0;
padding: 0 16px;
)
<header>
<nav>
<ul class="nav-list">
<li>Home</li>
<li>About</li>
</ul>
</nav>
<div class="search-wrapper">
<input type ="search" placeholder="search" />
</div>
<ul class="nav-list nav-list-right">
<li>Contact</li>
</ul>
</header>
Related
So I am doing a navigation menu in CSS, but I can't seem to get it correctly.
I have 4 li elements inside a ul. I want the space between these elements to resize responsively, depending on the size of the window.
I thought about using the margin-right property with like a 10% value, so the elements would spread apart more if the window is bigger. Long story short this method doesn't work and I wanted to see if anyone knows how I can make it work. I'll leave the important code beneath.
#links li{
margin-right: 10%;
}
#navbar li{
display: inline-block;
}
.container-nav{
width: 85%;
margin: auto;
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
}
<nav id="navbar">
<div class="container-nav">
<ul id="links">
<li>Inicio</li>
<li>¿Quiénes somos?</li>
<li>Servicio</li>
<li>Contacto</li>
</ul>
</div>
Thanks a lot for the help!
If you set the style for links to be
#links{
display: flex;
justify-content: space-between;
}
This code is setting the Links ul to be a flex container and spacing the elements evenly
https://codepen.io/adamjamesturner/pen/MWYNxrx
EDIT:
The issue with your code is you need to set the ul to be a flex-container which then, by default, has a flex-direction: row and so gives the behaviour you desire.
I need to centre a div. This div is the width of its 2 containing 'rows'. The width of these 'rows' is defined by their content. The content has both left and right aligned elements. I also need the content which is less tall to be vertically centred.
So far Ive done all of this. I also need a background colour on the rows and a space between them. Ive done the space with div.spacer but im wondering if its possible to achieve the same thing without an empty div to keep my markup cleaner?
Im struggling as display table-row and table-cell don't allow for margin.
I also tried using pseudo content to absolutely position a white block over the top to make it look like there was a space between the rows, but relative display doesnt apply well to an element with display table-row cross browser.
I tried using the border-spacing css property but it adds margin both above and below rows, and I just need the margin below.
Below is my markup. The image shows exactly what I need to achieve, so can I do the same thing without div.spacer?
http://codepen.io/anon/pen/ZWMPgB
<div class="cont">
<div class="row">
<h2>Heading</h2>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="spacer"></div>
<div class="row">
<h2>Longer Heading</h2>
<ul>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</div>
</div>
body {
padding-top: 10px;
}
* {
margin: 0;
padding: 0;
}
.cont {
display: table;
margin: auto;
}
.row {
display: table-row;
background: grey;
}
h2 {
display: table-cell;
padding-right: 50px;
font-size: 3em;
}
ul {
display: table-cell;
vertical-align: middle;
}
li {
display: inline-block;
}
.spacer {
display: table-row;
height: 10px;
}
Maybe you need something like this:
.row > * {
border-bottom: 5px solid #ffffff;
}
This will add 5px space after your rows.
I am building my first website after reading through CSS and HTML.I was able to bring the header on my index page with nav bar and the brand. For the brand, I aligned it in the center using the margin-top property and set the navigation links using float property. However, when I inspect the ul element using firefox,
I see a margin-top and margin-bottom of 16 px each which I do not have a clue on how its getting added.
Is aligning the brand using the margin-top property the right way to center align?
Why is the ul element not taking the entire height of 44 px set for the header.
I am adding the plunker url for more details: http://plnkr.co/edit/RjQtIR?p=preview
Code for more details:
<header class="main-header">
<nav class="top-bar clearfix">
<span class="brand">Money Plant Services</span>
<section class="nav-menu">
<ul class="nav-items">
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Services</li>
<li>Downloads</li>
<li>Contact Us</li>
</ul>
</section>
</nav>
</header>
CSS:
.main-header{
width: 100%;
height:44px;
background-color: #3A3A3A;
}
.brand{
float: left;
margin-top: 12px;
padding-left: 10px;
color: #FFFFFF;
}
.nav-menu{
float:right;
}
.nav-items{
list-style: none;
}
.nav-items li{
float: left;
margin-right: 5px;
padding: 5px;
background-color: #FFFFFF;
}
li > a{
color: black;
text-decoration: none;
}
I hope this will helps you. Just replace the below code with yours it will works...
CSS:
.nav-items {
list-style: none;
margin: 0;
padding: 0;
margin-top:8px;
display: inline-block;
}
Ul has a default margin so you can remove that by adding....
<ul style="margin:0px">
Also margins are different from browser to browser so its worth checking out info online about it or test it for yourself using inspect element.
When aligning horixontally there are many ways to do it...
you could use the text-align method or the margin auto method or the custom padding way.(there are also other ways).
Example:
<div style="width:400px;height:20px;text-align:center;">
<div style="width:20px;height:20px;">
</div></div>
Example:
<div style="width:400px;height:20px;">
<div style="width:20px;height:20px;margin-left:auto;margin-right:auto;">
</div></div>
Vertical align is a bit harder but can be done with table cells (there are also other methods).
The right way to align is either using the text-align property or using auto margins as said by the w3c validation service.
I added center-vertically to <div class="col-lg-6 col-lg-offset-3"> in the services section but this doesn't seem to work. I tried a couple of other things as well but to no success.
center-vertically contains:
display: table-cell;
text-align: center;
vertical-align: middle;
Check out the live version here (just go to the services section to check out the tabs) if you inspect element on the column the tabs are in you will see a little bit of extra space on the right.
parent should have:
parent {
display: table;
}
child:
child {
display: table-cell;
vertical-align: middle;
margin: 0 auto; // if you want horizontal centering too
}
UPDATE
To horizontally center your UL inside of the column:
<ul class="nav nav-tabs" style="display: inline-block;margin: 0 auto;">
Your UL has full width. display: inline-block will trim it and margin: 0 auto will center it inside the parent.
Zurb Foundation's top-bar is extremely useful. It works great as a main navigation for a site/app, and collapses to a mobile-friendly format on smaller devices.
Its one major shortcoming is the ability to make the top-bar full-width with evenly spaced nav items. Is there a way to make the top-bar full-width and the nav items evenly spaced?
Example
If the top-bar has 6 nav items (width varying length titles) and we're using the default width of 1000px for .rows (with 15px gutters) the 6 nav items should evenly space themselves across the 970px top-bar. The first and last nav items should be left and right justified respectively.
As the screen size reduces the nav items should shrink in width to maintain their even spacing until the $topbar-breakpoint causes the top-bar to collapse to the mobile format.
Requirements
The solution should be CSS-based.
The solution should match Foundation 5's compatibility chart. Namely this means it needs to support IE9+.
Beneath the $topbar-breakpoint the top-bar should work as normal.
Here's a jsFiddle with the Foundation 5 resources already loaded.
Here is another solution. It is based on flexbox which hasn't been supported by browser for very long and it is still only a candidate recommendation: CSS Flexible Box Layout Module
jsFiddle
If you provide a good fallback, like the original Foundation CSS it can be used.
Update
You could also use this jQuery solution as a fallback as I haven't found any polyfills for flexbox: http://jsfiddle.net/borglinm/x6jvS/14/
.top-bar-section > ul {
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
}
.top-bar-section > ul > li {
float: none;
-webkit-flex: 1;
-moz-flex: 1;
flex: 1;
}
.top-bar-section > ul > li > a {
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
overflow: hidden;
}
Here's a solution that might need a bit of tweaking
JSFiddle Here
Sticking to the CSS-only requirements, the only feasible way I can think of is using CSS tables. We create nested table, table-rows and table-cells. The table-cells, by default, will try to maintain equal spacing between itself and other table-cells.
The table-row needs to span the entire topbar minus any Foundation topbar title-areas. To do this, we use an overflow: hidden trick to make the .top-bar-section span the remaining width of the topbar. Finally, we wrap our topbar with a div that has display: table and spans its parent.
Here's the relevant CSS
.top-bar-section {
overflow: hidden;
}
.center-topbar {
display: table;
width: 100%;
}
.center-topbar .full-width {
display: table-row;
}
.center-topbar .full-width li {
display: table-cell;
float: none;
text-align: center;
}
What we are left is with a topbar whose elements are centered and have widths that vary depending on its contents. The $topbar-breakpoint works as normal as well.
Improvements?
Works on Chrome + Safari well on my end (OS X). For Firefox, the dropdown arrow is not displaying due to the removal of the left float. Just wanted to post this to get the conversation going. Anyone have any improvements?
Here's a solution using some built in foundation classes...basically I added 4 classes to your fiddle.
http://jsfiddle.net/x6jvS/7/
<div class="row">
<div class="small-12 columns">
<nav class="top-bar contain-to-grid" data-topbar>
<ul class="title-area">
<li class="name">
<h1></h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="full-width web button-group large-block-grid-6">
<li>Link 1</li>
<li class="has-dropdown">
Long Link 2
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Even Longer Link 5</li>
<li>Link 6</li>
</ul>
</section>
</nav>
</div>
</div>
added class "contain-to-grid" to the nav element
added classes "web button-group large-block-grid-6" to the "section.top-bar-section > ul" (first ul in that section)
and blammo...seems to work fairly well cross-browser