First of all, i'm new to css.
The problem is i'm trying to do a horizontal navigation bar, on the left. But my flexbox doesn't work, the navigation keeps getting vertical. Seems like it's locked, don't know if that's posible.
Please, how can i make my horizontal navigation bar using flexbox?
HTML:
<header>
<nav>
<ul>
<li>MENU</li>
<li>HISTORY</li>
<li>LEARN MORE</li>
</ul>
</nav>
<h1>ORCA</h1>
</header>
CSS:
nav, a {
font-family: outfit-bold;
color: black;
font-size: 16px;
text-decoration: none;
display: flex;
}
When i put "display: flex" i was expecting it to be horizontal, but it was vertical.
I also put display: inline-block and didn't work.
how it is navigation bar vertical
ul {
display: flex;
}
<header>
<nav>
<ul>
<li>MENU</li>
<li>HISTORY</li>
<li>LEARN MORE</li>
</ul>
</nav>
<h1>ORCA</h1>
</header>
try to put display: flex on the ul element. It will put the children in line
If you want to read a really good and detailed resource about flexbox - take a look here -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
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>
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
How can I make the <li> item width fit the text length in Bootstrap 3? My menu item is shorter than the text which causes my class="active" to look ugly.
This is the navbar in which it occurs:
<div id="menu" class="col-md-1">
<ul class="nav nav-pills nav-stacked">
<li class="active">Startseite</li>
<li>Kontakt</li>
</ul>
</div>
make a .custom_li class and give
.custom_li{
display:inline-block;
}
EDIT
To force same size, i'll suggest using max-width and place it under some media-query
li{
display: inline-block;
max-width:50%; /* limit width */
word-break:break-all; /* wrap extended text*/
border:1px solid red /* demo */
}
demo here
some optional things
some optional things
When I tried display: inline-block; it removes the bullet.
Instead, I use float:left; to have them only as wide as text, while preserving the bullet. Optionally, add clear:both; to keep it as a vertical list with each item on a new line.
CSS
.my-list > li {
float: left;
clear: both; /* remove this if you want them flowing inline */
}
HTML
<ul class="my-list">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
</ul>
If the display: inline-block; or display: block; is messing up the alignment.
Then just use width: fit-content;
Prevent it becoming a block by adding display: inline-block; to the proper element.
Post more code and preferably CSS if you want details.
I got it to work with the following css:
ul {
margin: 0 auto;
width: fit-content;
}
li{
display:flex;
margin: 0.5rem auto;
}
Basically what I did was make the container width to fit content. Used the CSS hack to make sure it would center using the margin. In the li tag I wanted the contents to be centered so I set it that way
I wish to have a bunch of rectangles containing text, sitting next to each other, and wrapping to the next line where necessary. I have a maximum width for each rectangle, and any text that doesn't fit inside the rectangle should be hidden.
Here is the code I have written
HTML
<div id="outer">
<ul id="list">
<li>The name of soemthing</li>
<li>Something else</li>
<li>Something else 2</li>
<li>Something else 3 </li>
<li>Something else 4</li>
</ul>
</div>
CSS
#outer {
background-color: #0000ff;
width: 500px;
}
#list {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#list li {
display: inline-block;
max-width: 100px;
overflow: hidden;
white-space:nowrap;
height: 24px;
padding: 0px;
background: #ff0000;
margin: 0px;
}
It works perfectly in Chrome.
In Firefox/IE, there is a small vertical gap/margin added between each rectangle.
I can make the gap go away by removing the 'overflow: hidden' on the LI elements, but this ofcourse allows rectangles to grow freely - which is what im trying to avoid.
Anybody know why this is happening?
Try putting all the <li> tags on the same line. The browsers are rendering the line break as white space.
<div id="outer">
<ul id="list">
<li>The name of soemthing</li><li>Something else</li><li>Something else 2</li><li>Something else 3</li><li>Something else 4</li>
</ul>
</div>
Can you use floated block elements instead or do they have to be inline-block elements?
Here's your example, and here's the code working with shrink-wrapped floating elements.
You simply need to add vertical-align: top to #list li: http://jsfiddle.net/thirtydot/PF4fW/
Every time you use display: inline-block, you should consider setting vertical-align.
Look at "Series A" here to compare the different possible common values.
I have a menu which has sub-menus and I have defined it as such:
<nav class='top'>
<li>Lanky</li>
<li>
Links
<nav class='sub'>
<li>dead beef</li>
<li>cafe feed</li>
</nav>
</li>
<li>Locks</li>
<li>Linger</li>
</nav>
I style it in such a way that the sub nav appears beside it's parent when on hover.
Problem is, I cannot click on those links. When I hover over the parent, the sub menu shows to the right and the Locks link displays beside the sub-menu (this is expexted). But once I mouseOut - say to try and click on dead beef, they disappear and the Lock link jumps back to its original position.
How do I make the sub menu persist to allow the mouse slide over to it?
To make your code compliant and accessible, you need to use the <ul> tags.
I suggest wrapping your <li> within the <ul> tags to fix your navigation errors - where you can also apply your class to the ul tag and there is no need for an additional div.
<ul class='top'>
<li>Lanky</li>
<li> Links
<li>
<ul class='sub'>
<li>dead beef</li>
<li>cafe feed</li>
</ul>
</li>
<li>Locks</li>
<li>Linger</li>
</ul>
Fixed this by addressing the list elements that had nav containers nested within. Many thanks to thirtydot for pointing me to jsFiddle - an amazing tool!
Here is the CSS...
nav { text-align: left; }
nav li { display: inline; text-align: center; }
nav a { display: inline-block; }
nav li { width: 95px; }
nav li nav { display: none; }
nav li:hover nav { display: inline; }