I new to CSS and I want to ask a question: I have a <header> with two elements and I want to align them, the title on the right and the navigation on the left, but I couldn't really hack it alone.
<pre>
<header >
<h1>Title</h1>
<nav class="navigation">
<ul class="navlist">
<li>list element</li>
<li>list element</li>
<li>list element</li>
</ul>
</nav>
</header>
</pre>
You should learn about flexbox:
header {
display: flex;
}
header h1 {
order: 1;
}
<header>
<h1>Title</h1>
<nav class="navigation">
<ul class="navlist">
<li>list element</li>
<li>list element</li>
<li>list element</li>
</ul>
</nav>
</header>
I guess may you want to achieve in this ui look.
Here is some good article may can helps you flexbox
#parent {
width: 100%;
}
header {
display: flex;
justify-content: space-between;
}
<div id="parent">
<header>
<h1>Title</h1>
<nav class="navigation">
<ul class="navlist">
<li>list element</li>
<li>list element</li>
<li>list element</li>
</ul>
</nav>
</header>
</div>
Related
how is possible to make simple top menu in foundation 5? Is needed to use topbar or is there any other possibility? My actual code is:
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>Site Name</h1>
</li>
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="active">Domov</li>
<li>Home</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Contact</li>
</ul>
</section>
</nav>
But i have problem with mobile version. Navigation is broken and jumps under menu not collapse in simple button. Can someone tell me why? and how to fix it, or make more simple navigation? Thanks.
This is a standard foundation .top-bar navigation. Don't forget to include the necessary js files and initialize them as well.
<nav class="top-bar" data-topbar role="navigation">
<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>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
Just add this
.top-bar {
overflow: visible;
}
DEMO
I think , instead of using topbar , you can use iconbar which will easily meet your requirement . UI will be same for mobile as well as for desktop version .
Check below link:
http://foundation.zurb.com/docs/components/icon-bar.html
I'm using bootstrap 2.3 for menu links
<div class="span3">
<ul class="nav nav-pills nav-stacked">
<li class="active">My profile</li>
<li>Edit</li>
<li>Photos</li>
<li>Competitions</li>
<li>List of profiles</li>
</ul>
</div>
Is it possible to place two links (My profile and edit) in one line by using bootstrap like showed on picture or any other way to do it. Thanks.
You can achieve this with just CSS, using the nth-child selector. It is still responsive.
li:nth-child(1), li:nth-child(2) {
display:inline-block;
}
DEMO: http://jsfiddle.net/z5pXh/3/
nest another ul inside and a little additional css
CSS
ul.nav-edit {
margin-bottom: 0;
}
ul.nav-edit li.active {
display:inline-block;
width: 88%;
}
HTML
<div class="span3">
<ul class="nav nav-pills nav-stacked">
<li>
<ul class="nav nav-pills nav-edit">
<li class="active">My profile</li>
<li class="pull-right">Edit</li>
</ul>
</li>
<li>Photos</li>
<li>Competitions</li>
<li>List of profiles</li>
</ul>
</div>
Check out the fiddle at http://jsfiddle.net/Y2LUZ/
Live Demo
If fixed sizes are good for you, you can use this:
HTML
<div class="span3">
<ul class="nav nav-pills nav-stacked pos-rel">
<li class="col-first active">My profile</li>
<li class="col-second">Edit</li>
<li>Photos</li>
<li>Competitions</li>
<li>List of profiles</li>
</ul>
</div>
CSS
.pos-rel {
position: relative;
}
.col-first {
width: 300px;
}
.col-second {
position: absolute;
top: 0;
left: 305px;
}
I added a simple <nav class="top-bar"> element to my page. It's displaying properly on computers, but on the iPhone I just get a solid black bar with no menu items. This is the top part of my nav.
<nav class="top-bar" style="">
<ul class="title-area">
<li class="name"></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown not-click">Orders
<ul class="dropdown"><li class="title back js-generated"><h5>« Back</h5></li>
<li class="">Create New</li>
</ul>
</li>
</ul>
</section>
</nav>
Just remove the height in your CSS:
.top-bar .name {
height: 45px;
}
Specifying a height was causing the <li> to render below <nav>, and since overflow:hidden was set, the <li> was not being displayed.
I'm trying to select the first anchor tag of a nested li menu tree:
<div class="footermenu">
<ul class="menu">
<li class="expanded first">
First menupoint
<ul class="menu">
<li class="first">First submenupoint</li>
<li>Second submenupoint</li>
<li>Third submenupoint</li>
<li class="last">Fourth submenupoint</li>
</ul>
</li>
<li class="expanded last">
Second menupoint
<ul class="menu">
<li class="first">First submenupoint</li>
<li>Second submenupoint</li>
<li>Third submenupoint</li>
<li class="last">Fourth submenupoint</li>
</ul>
</li>
</ul>
What I'm trying to accomplish is to select only the first anchor tag of the main menupoints.
My css is:
div.footermenu li.expanded a:first-child {
font-weight: bold;
}
The problem is that this CSS still selects the submenupoints and I don't know why.
You want to use div.footermenu li.expanded > a:first-child
jsFiddle
http://jsfiddle.net/eRTV6/
div.footermenu li.expanded > a:first-child {
font-weight: bold;
}
Your original selector will select all anchor elements which are first-children of li.expanded, by adding a direct descendant selector, >, you specify that you only want to select the first, direct descendant of li.expanded which are anchors.
Try this:
<html>
<head>
<style TYPE="text/css">
div.footermenu li.expanded>a{
font-weight: bold;
background: Red;
}
</style>
</head>
<body>
<div class="footermenu">
<ul class="menu">
<li class="expanded first">
First menupoint
<ul class="menu">
<li class="first">First submenupoint</li>
<li>Second submenupoint</li>
<li>Third submenupoint</li>
<li class="last">Fourth submenupoint</li>
</ul>
</li>
<li class="expanded last">
Second menupoint
<ul class="menu">
<li class="first">First submenupoint</li>
<li>Second submenupoint</li>
<li>Third submenupoint</li>
<li class="last">Fourth submenupoint</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I'm using zurb foundation 4.
I create a top bar with a search form within the same:
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1>Title</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="has-form">
<form>
<div class="row collapse" >
<div class="small-10 columns">
<input type="text">
</div>
<div class="small-2 columns">
S
</div>
</div>
</form>
</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown">Drop1
<ul class="dropdown">
<li>Dropdown Level 3a</li>
<li>Dropdown Level 3b</li>
<li>Dropdown Level 3c</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown">Drop2
<ul class="dropdown">
<li>Dropdown Level 3a</li>
<li>Dropdown Level 3b</li>
<li>Dropdown Level 3c</li>
</ul>
</li>
</ul>
</section>
I need to increase the size in the search field without losing responsiveness. Does anyone have any idea how can I do?
http://cl.ly/image/1a412p3M3e1J
If you're using SASS, simply change:
input { height: $topbar-input-height }
To:
input { height: $topbar-height }
If you're using CSS, change the line with:
.top-bar input { height: 2.45em; }
To:
.top-bar input { height: 45px; }
Follow a similar process if you wish to change the width.
I am a big fan of CDN, so editing the Foundation files is not an option.
Here is the workaround that works for me:
.top-bar input {
height: auto !important;
padding-top: .35rem !important;
padding-bottom: .35rem !important;
}