Is it possible to not have the top bar in Foundation to collapse to Menu and the three lines? We don't really need this feature but not sure how to disable the collapse.
Will this require modifying the foundation.topbar.js?
If you're using Foundation via sass, there's an even better way to go about it.
Just open up the _settings.scss file and find this line:
// $topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout
Uncomment it and change the value to 0, or whatever breaking point you would like to use.
Things have changed in foundation 5.1.1 and this worked for me in the css: changed
#media only screen and (min-width: 40.063em) {
.top-bar {
to
#media only screen and (min-width: 4.063em) {
.top-bar {
Yes, it's possible to not show the default nav menu for small-screens with the menu toggle icon without modifying any js files. Foundation 4 uses a series of visibility classes to show and hide elements on the screen along with media queries.
As an example here's the main navigation for Zurb's demo site linked above:
<nav class="top-bar hide-for-small" style="">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>Foundation</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="divider"></li>
<li class="">Features</li>
<li class="divider"></li>
<li class="">Add-ons</li>
<li class="divider"></li>
<li class="">Case Studies</li>
<li class="divider"></li>
<li class="">Docs</li>
<li class="divider"></li>
<li class="">Training</li>
<li class="divider"></li>
<li class="has-form">
Getting Started
</li>
</ul>
</section></nav>
As you can see it's simple to remove the .menu-icon class or even the li; if you look at line 2816 of docs.css you can see that a minimum screen breakpoint (58.75em) is set for the .top-bar class:
#media only screen and (min-width: 58.75em) {
.top-bar {
background: #111111;
*zoom: 1;
overflow: visible; }
.top-bar:before, .top-bar:after {
content: " ";
display: table; }
.top-bar:after {
clear: both; }
.top-bar .toggle-topbar {
display: none; }
.top-bar .title-area {
float: left; }
.top-bar .name h1 a {
width: auto; }
...
Since F4 is built with a mobile first design approach by default the menu is set for small screens. At a minimum width of 58.75 em, the breakpoint is set to modify the default .top-bar view for larger screens so that the menu ul is displayed inline and the child li are floated left.
You can override the .top-bar so that this is the default view by overriding the corresponding lines of css/scss or even the global variables.
If you're working directly with the Foundation CSS, you can override the mobile mode of the .top-bar menu by changing the breakpoints in the following lines of CSS to 0em:
.top-bar-js-breakpoint {
width: 58.75em !important;
visibility: hidden; }
.js-generated {
display: block; }
#media only screen and (min-width: 58.75em) {
----- numerous lines below -------
However, if you're working with a child theme in WordPress or another CMS, you have to copy all of the .top-bar related selectors below the actual media query and paste them into your child CSS, then change the breakpoints to 0. Works like a charm.
Related
I am hoping to have a navigation bar run across the entire screen, with a purple background and a to have a the menu sit in the middle of the bar. Right now I cant get the background color to work.
My Css:
div#main-navigation {
background-color: #AC56B8;
width: 100%;
height: 100px;
}
My Html:
<div class="main-navigation">
<ul id="menu">
<li>HOUSE</li>
<li>BABY</li>
<li>MORE</li>
<li>ABOUT</li>
</ul>
</div>
You are using wrong css selector # is for ids, to select element by class you have to use ., so the first line of your CSS must be: div.main-navigation {
Look for this:
Replace div#main-navigation for div.main-navigation
div.main-navigation {
background-color: #AC56B8;
width: 100%;
height: 100px;
}
<div class="main-navigation">
<ul id="menu">
<li>HOUSE</li>
<li>BABY</li>
<li>MORE</li>
<li>ABOUT</li>
</ul>
</div>
Write . instead of #
# is for id, . is for class.
How can I make this have the buttons in the same column as each other?
ul
li
p button
p button
using flexbox
if the p has different width the buttons are shifted.
Flexbox has no grid notion.
Instead, you can use CSS tables
ul {
display: table;
}
li {
display: table-row;
}
p, button {
display: table-cell;
}
<ul>
<li>
<p>Short</p>
<button>Foo</button>
</li>
<li>
<p>Long long long text</p>
<button>Bar</button>
</li>
</ul>
I have a menu within a ul li and I'd like to change the background image for only one of the menu items.
In the css below the current background image is menu-ul.jpg and I need the additional background image for the "Capsules" menu item to be menu-ul2.jpg
Here's my current menu html:
<ul class="menu">
<li><strong>home</strong><span></span></li>
<li><strong>Products</strong><span></span>
<ul>
<li>Dew Drops</li>
<li>Capsules</li>
<li>Salvation Balm</li>
</ul>
Here's the piece of css that deals with the background image for the menu items:
.menu ul {
position: absolute;
padding: -3px 10px;
top: -999em;
width: 107px;
background: url(../images/menu-ul.jpg) left top repeat;
}
Any help would be greatly appreciated...thanks.
Meg
You can reach that effect by adding a class to the list item you want to change.
Add this to your CSS
.menu ul li.capsule {
background: url(../images/menu-ul2.jpg)
}
And this in your html
<li class="capsule">Capsules</li>
Off course there are many other ways...
Responsive navigation hidden on window resize.
Hi all
I have a demo here
http://www.ttmt.org.uk
and jsfiddle here
http://jsfiddle.net/VCPJu/
It's a simple horizontal li list navigation, on window resize the navigation hides and a menu button shows. Menu button then slides down the navigation that is now vertical.
If I make the window smaller open the slide down menu and resize the window bigger the navigation returns to the horizontal menu.
My problem is if I make the window smaller open the slide down menu and then close then resize the window larger the horizontal menu doesn't show again.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
#menu_btn{
width:50px;
height:30px;
background:red;
display:none;
color:white;
text-align:center;
}
#menu_btn:hover{
cursor:pointer;
}
nav{
margin:50px;
display:block;
}
nav ul{
display:block;
overflow:auto;
background:#eee;
}
nav ul li{
display:inline;
}
nav ul li a{
font-family:helvetica, sans-serif;
float:left;
display:block;
padding:5px;
background:#aaa;
text-decoration:none;
margin:0 5px 0 0;
color:red;
}
#media only screen and (max-width:500px){
#menu_btn{
display:block;
}
nav ul{
display:none;
}
nav ul li{
display:block;
}
nav ul li a{
float:none;
margin:0 0 5px 0;
}
}
</style>
</head>
<body>
<nav>
<a herf="#" id="menu_btn">Menu</a>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<script>
$('#menu_btn').click(function(){
$('nav ul').slideToggle();
})
</script>
</body>
</html>
You're going to have to use some javascript to detect the screen size and reset nav ul{display: block;} ... the reason why is because when you're firing off your jquery it is applying the style DIRECTLY to your element making your internal CSS not want to render.
EDIT::: here is probably an easier solution by using class http://jsfiddle.net/Pkk2h/
This is an old question, however I came across it whilst looking for a solution to the same problem as it was occurring to me, I wanted to add a new answer as the one that was marked as the accepted answer isn't completely true. Yes, the Jquery applies the display property directly to your element, however you do not need to apply the display element again using Jquery, you can simply add a media query for when the screen size is to show your full screen menu and then set the menu element to display: block!important; which will over-write the Jquery display set. Hope this helps out any future readers with this problem, if the author of the question is still active, I assume you would accept my answer.
#media only screen and (max-width: 950px){
#nav {
/* Apply your responsive menu for screen sizes smaller than 950px */
}
}
#media only screen and (min-width: 951px){
#nav {
display: block!important;
}
}
I've been learning html and css for the past couple weeks. Now I have to make a portfolio website for school which is due next Wednesday. Sadly, I can't get it to work the way I want and was hoping to find some help on this website.
I had this idea of a site consisting of a full width div and a full width footer. The plan was to make the footer always stick to the bottom of the div (unless the screen is to small so the footer doesn't overlap the content) and the div resize according to the volume of the content. It seems to work on my laptop which has a small screen but when I open the website on a computer with a larger screen it doesn't position the footer correctly.
The website is viewable at http://home.deds.nl/~gwleuverink/concept/index.html.
I hope someone can help me with this!
See this example
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
for more info check this link http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page