I cannot seem to find the right way to inline list a 'ul' (and it's li elements, so they appear horizontally instead of vertically) in Foundation 6 (F5 has a 'inline-list' class)
<footer class="text-center">
<div class="row" id="footer-nav">
<div class="columns large-3 medium-3">
<h4>Footer nav area 1</h4>
<ul>
<li>Nav link 1</li>
<li>Nav link 2</li>
<li>Nav link 3</li>
</ul>
</div>
<div class="columns large-3 medium-3">
<h4>Footer nav area 1</h4>
<ul>
<li>Nav link 1</li>
<li>Nav link 2</li>
<li>Nav link 3</li>
</ul>
</div>
<div class="columns large-3 medium-3">
<h4>Footer nav area 1</h4>
<ul>
<li>Nav link 1</li>
<li>Nav link 2</li>
<li>Nav link 3</li>
</ul>
</div>
<div class="columns large-3 medium-3">
<h4>Footer nav area 1</h4>
<ul>
<li>Nav link 1</li>
<li>Nav link 2</li>
<li>Nav link 3</li>
</ul>
</div>
</div>
<hr class="footer-divider">
<div class="row" id="footer-social-company">
<div class="columns large-12 medium-12">
<!-- how to center align the following ul? -->
<ul class="menu align-center" id="social-list">
<li>twitter</li>
<li>google+</li>
<li>facebook</li>
<li>linkedin</li>
</ul>
<div class="" id="company">© My Company</div>
</div>
</div>
</footer>
OK so I found this:
http://foundation.zurb.com/forum/posts/36854-where-is-inline-list-in-foundation-6
But adding class 'menu' to the UL element makes it full width, losing the ability to centre-align the ul properly (I want to be able to exactly center the ul). Accordng to docs, you can either left or right align but not center align?
http://foundation.zurb.com/sites/docs/menu.html#item-alignment
Thanks for help
They changed it to .menu.simple
<ul class="menu simple">
http://foundation.zurb.com/sites/docs/menu.html#
What worked was using following on the parent div above the ul:
<div class="columns large-4 medium-4 large-centered small-centered">
Related
I was using bootstrap 4 when I found this behaviour unexpected:
https://jsfiddle.net/hzse8gfd/1/
In my fiddle, I have a sidebar which is stretched to screen's maximum height.I then have a 50px logo sitting on top of the sidebar, and a div that holds the rest of the sidebar content.
What I realised is that the content gets vertically pushed down/align center of the parent height, when I am expecting it stick to the top, just like the logo segment. Just curious why is the behavior as such.
I'm using bootstrap 4
HTML:
<div id="sidebar" class="row">
<div class="col-12 logo">
</div>
<div class="col-12 sidebar-content">
<div class="row">
<ul id="sidebar-results">
<li>Result 1</li>
<li>Result 2</li>
<li>Result 3</li>
<li>Result 4</li>
<li>Result 5</li>
<li>Result 6</li>
<li>Result 7</li>
<li>Result 8</li>
</ul>
</div>
</div>
</div>
CSS:
.logo{
width:200px;
height:50px;
background-color:blue;
}
#sidebar{
height:100vh;
}
I found out it's because you use .col-12 twice in a single .row, while total amount of columns should add up to 12 - your case: 24.
.logo{
width:200px;
height:50px;
background-color:blue;
}
#sidebar{
height:100vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="sidebar">
<!-- LOGO ROW -->
<div class="row">
<div class="col-12 logo"></div>
</div>
<!-- RESULTS ROW -->
<div class="row">
<div class="col-12 sidebar-content">
<ul id="sidebar-results">
<li>Result 1</li>
<li>Result 2</li>
<li>Result 3</li>
<li>Result 4</li>
<li>Result 5</li>
<li>Result 6</li>
<li>Result 7</li>
<li>Result 8</li>
</ul>
</div>
</div>
</div>
How to make a display of three columns as one submenu while hovering each menu.
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul class="vertical-nav">
<li>Link 1</li>
<li>Link 2
<ul class="sub-menu">
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
I want to make the menu like this below image
Please see below. Hope this helps.
$('.vertical-nav li a').mouseover(function() {
$(this).parent().find('.sub-menu').show();
})
.mouseout(function() {
$(this).parent().find('.sub-menu').hide();
});
.sub-menu {
display:none;
}
.vertical-nav li, .sub-menu li {
list-style:none;
}
.column {
float:left;
width: 100px;
}
.title {
padding-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul class="vertical-nav">
<li>Link 1</li>
<li>Link 2
<ul class="sub-menu">
<div class='column'>
<li class='title'>Style</li>
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</div>
<div class='column'>
<li class='title'>Subject</li>
<li>Sub Link 3</li>
<li>Sub Link 4</li>
</div>
<div class='column'>
<li class='title'>Medium</li>
<li>Sub Link 5</li>
<li>Sub Link 6</li>
</div>
</ul>
</li>
</ul>
</div>
</div>
</div>
I got this problem that when I hover on my dropdown menu, the background changes and the color does also. But i can't get it to white..
What to do?
http://hcl.konggulerodhosting.dk/index.html
<nav>
<div id="topBar" data-toggler="is-active" class=" top-bar row ">
<button type="button" data-toggle="topBar" class="mobile__close hide-for-large"> </button>
<div class="small-12 columns">
<div class="top-bar-left">
<div class="site-logo"><img src="assets/images/logo.svg" alt=""></div>
</div>
<div class="top-bar-right">
<p class="mobile__headline hide-for-large">Menu</p>
<ul data-responsive-menu="drilldown large-dropdown" data-back-button="<li class="js-drilldown-back drilldown-back"><a>Back</a></li>" class="menu">
<li class="active">Forside</li>
<li>Undersøgelser
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</li>
<li>Tilskud</li>
<li>Høreapparat</li>
<li>Information</li>
<li>Om os</li>
<li class="search__toggler">
<button type="button" data-toggle="search" id="search-toggler"></button>
</li>
</ul>
</div>
</div>
</div>
</nav>
.is-dropdown-submenu-item {
color:white;
}
is not working. So i dont know what to do..
Please don't link your site as it's bad for archiving purposes.
You need to change the link colour.
.is-dropdown-submenu-item a:hover {
color:#fff;
}
Check this image.............................................
I have the following html for my page. I'm trying to figure out why the well component has the content not being containing in the element. Its starting outside the element the well.
<div class="row">
<div class="well">
<div class="col-md-6">
<h2>Education</h2>
<ul>
<li>School 1</li>
<li>School 2</li>
</ul>
</div>
<div class="col-md-6">
<h2>Education</h2>
<ul>
<li>School 1</li>
<li>School 2</li>
</ul>
</div>
</div>
</div>
.well {
background-color: #9999FF;
padding: 30px;
margin-top: 50px;
}
Try adding the well class to the outer div. JSFiddle
<div class="row well">
<div class="col-md-6">
<h2>Education</h2>
<ul>
<li>School 1</li>
<li>School 2</li>
</ul>
</div>
<div class="col-md-6">
<h2>Education</h2>
<ul>
<li>School 1</li>
<li>School 2</li>
</ul>
</div>
</div>
In Bootstrap, all col-* elements are floated left, this means that the parent (i.e. the row) doesn't fully surround the children. You should try to keep wells inside the col-* elements. Otherwise you can also make the well surround the entire row which may also achieve what you wish.
I have recently downloaded TB 2, and have started to familiarize myself with it. I am creating a page based on the hero example.
I am creating a page based off the hero example. The page content area is the element with class 'container' in my markup. The layout I am creating is as follows (within the 'container' element), create two columns:
Left hand column (66.66% of page area)
Right hand column (33.33% of page area)
The left hand column will contain two rows, with the top row containing nav pills, and the bottom row containing nav tabs.
This is the HTML in the 'container' element:
<div class="row">
<div id="page-left-column" class="span8">
<div class="row">
<ul class="nav nav-pills pull-right">
<li class="active">Pill 1</li>
<li>Pill 2</li>
<li>Pill 3</li>
<li>Pill 4</li>
<li>Pill 5</li>
</ul>
</div>
<div class="row">
<ul class="nav nav-tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
</div>
<div id="page-right-column" class="span4">
<div class="row">
</div>
<div class="row">
</div>
</div>
</div>
Using Firebug, I find that both the tab and pills have spilt out of their containing element, so in the case of the nav tabs, where content is on a page, the text is no longer lining up on the left handside of the column - i.e. the text is displayed OUTSIDE the column.
Is there something wrong with the markup above?
Solutions:
Each tags such as input, div, table, ul should have a span* class. Not required, but recommended.
In order to implement % rather than px on values: row-fluid, container-fluid should be applied. Child span* will just follow its containers.
The recommended pattern is: container, span, container, span, container, span, etc.
Container may be a (container or row (fluid or not fluid)). Span may be any elements/tags inside a container.
CSS:
.border {
border: 1px solid #afafaf;
}
#page-right-column {
margin:0;
}
HTML:
<div class="container border">
<div class="span12">
<div class="row-fluid">
<div id="page-left-column" class="span8">
<div class="row">
<div class="span12">
<ul class="nav nav-pills pull-right">
<li class="active">Pill 1</li>
<li>Pill 2</li>
<li>Pill 3</li>
<li>Pill 4</li>
<li>Pill 5</li>
</ul>
</div>
</div>
<div class="row">
<div class="span12">
<ul class="nav nav-tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
</div>
</div><!-- End of #page-left-column -->
<div id="page-right-column" class="span4">
<div class="row-fluid border">
<div class="span12">
First row of right column.
</div>
<div class="span12">
Second row of right column
</div>
</div>
</div><!-- End of #page-right-column -->
</div><!-- End of .container-fluid -->
</div>
</div><!-- End of .container -->