I have upgraded from Foundation 4 to Foundation 5, and I am trying to set up a custom break point in the top bar without using Sass.
In foundation 4 you were able to change the following css code in the foundation.css file:
.top-bar-js-breakpoint {
width: 48em !important;
...
}
#media only screen and (min-width: 48em) {
...
}
But this isn't possible with Foundation 5, atleast I am not able to find the piece of CSS or JS code to change it.
I have also tried redownloading a new custom foundation installation with the TOP BAR BREAKPOINT set to 9999em, which just does not work. Even after removing all previous files and code.
This simple problem is driving me nuts, so it would be great if someone would put me out my misery with a simple sollution, please!
Thanks in advance.
Find the meta.foundation-mq-topbar css selector in your code and change width attribute value to 48em or any other size you want.
Another solution:
Foundation separate components media query from each other, so you can change breakpoint for each components. Look at this code:
#media only screen and (min-width: 40.063em) {
.top-bar {
background: #333333;
*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; }
.top-bar input,
.top-bar .button {
font-size: 0.875rem;
position: relative;
top: 7px; }
.top-bar.expanded {
background: #333333; }
.contain-to-grid .top-bar {
max-width: 62.5em;
margin: 0 auto;
margin-bottom: 0; }
.top-bar-section {
-webkit-transition: none 0 0;
-moz-transition: none 0 0;
transition: none 0 0;
left: 0 !important; }
.top-bar-section ul {
width: auto;
height: auto !important;
display: inline; }
.top-bar-section ul li {
float: left; }
.top-bar-section ul li .js-generated {
display: none; }
.top-bar-section li.hover > a:not(.button) {
background: #272727;
color: white; }
.top-bar-section li a:not(.button) {
padding: 0 15px;
line-height: 45px;
background: #333333; }
.top-bar-section li a:not(.button):hover {
background: #272727; }
.top-bar-section .has-dropdown > a {
padding-right: 35px !important; }
.top-bar-section .has-dropdown > a:after {
content: "";
display: block;
width: 0;
height: 0;
border: inset 5px;
border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
border-top-style: solid;
margin-top: -2.5px;
top: 22.5px; }
.top-bar-section .has-dropdown.moved {
position: relative; }
.top-bar-section .has-dropdown.moved > .dropdown {
display: none; }
.top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
display: block; }
.top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
border: none;
content: "\00bb";
top: 1rem;
margin-top: -2px;
right: 5px; }
.top-bar-section .dropdown {
left: 0;
top: auto;
background: transparent;
min-width: 100%; }
.top-bar-section .dropdown li a {
color: white;
line-height: 1;
white-space: nowrap;
padding: 12px 15px;
background: #333333; }
.top-bar-section .dropdown li label {
white-space: nowrap;
background: #333333; }
.top-bar-section .dropdown li .dropdown {
left: 100%;
top: 0; }
.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
border-bottom: none;
border-top: none;
border-right: solid 1px #4d4d4d;
clear: none;
height: 45px;
width: 0; }
.top-bar-section .has-form {
background: #333333;
padding: 0 15px;
height: 45px; }
.top-bar-section ul.right li .dropdown {
left: auto;
right: 0; }
.top-bar-section ul.right li .dropdown li .dropdown {
right: 100%; }
.no-js .top-bar-section ul li:hover > a {
background: #272727;
color: white; }
.no-js .top-bar-section ul li:active > a {
background: #2ba6cb;
color: white; }
.no-js .top-bar-section .has-dropdown:hover > .dropdown {
display: block; }
}
You have to find the above code and just change this media query for changing top bar breakpoint.
Okay, I think I have the CSS changes pinned after the SCSS compiles.
Search for .top-bar in your CSS and look for the entry similar to the below, and change "981px" as needed:
#media only screen and (min-width: 981px) {
.top-bar {
background: linear-gradient(to bottom, #7d7d7d 0%, #646464 100%);
*zoom: 1;
overflow: visible
}
Search for meta.foundation-mq-topbar in your CSS and change "981px" as needed:
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width: 981px)/";
width: 981px
}
Basically what i did to make it work after reading the solution from Parhum. Search for the
meta.foundation-mq-topbar. There should be a width corresponding to it, in my case which is the 40.063em.This one has to be changed. Now, look for the corresponding media query (i.e. #media only screen and (min-width:40.063em)) Change BOTH of the width in both of the line. It should be working fine now.
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:64.00em)/";
width: 64.00em !the width of this must change; }
#media only screen and (min-width: 64.00em) {
.top-bar {
background: #333333;
Related
I want to hide sidebar when mouse cursor goes on menu bar which is in navigation bar to hide the sidebar.
I tried to hide it many ways but it did not worked for me so looking for any alternative.
Side should be hide once the mouse curser is on the menu bar
Here is my CSS code :
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background-color: #f3f5f9;
}
.navbar {
width: 100%;
height: 78px;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
text-align: center;
margin-inline-start: 45px;
padding: 26px;
color: white;
text-decoration: none;
font-size: 20px;
}
.navbar a:hover {
background-color: #000;
}
.active {
background-color: #04AA6D;
}
#media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
.wrapper{
display: flex;
position: relative;
}
.wrapper .sidebar{
width: 150px;
top: 78px;
height: 100%;
background: #4b4276;
padding: 0px 0px;
position:fixed;
transition: all 0.5s ease ;
}
.wrapper .sidebar ul li{
padding: 25px;
border-bottom: 1px solid #bdb8d7;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-top: 1px solid rgba(15, 3, 85, 0.05);
text-align: center;
transition: 0.3s;
}
.wrapper .sidebar ul li a{
color: #bdb8d7;
display: block;
}
.wrapper .sidebar ul li a .fas{
width: 45px;
}
.sub-menu-1{
display: none;
}
.wrapper .sidebar ul li:hover .sub-menu-1 {
display: block;
position: absolute;
left: 150px;
width: 250px;
top: 0px;
height: 92%;
border-radius: 2px;
box-shadow: 2px 2px 10px ;
background-color:#ffffff;
}
.wrapper .sidebar ul li .dropdown{
position: relative;
}
.wrapper .sidebar ul li:hover{
background-color:#d59bf6 ;
}
.wrapper .sidebar ul li:hover a{
color: rgb(70, 9, 105);
}
tried to hide the side bar but was unable to do so
I am making an app using react and it has gotta nav bar. So the problem is that my h1's and all the stuff are going inside the nav bar - when I mean that I mean that it is going through the nav bar -
<nav class="header">
<a href="" class="logo">
INDUSTRIES
</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn">
<span class="navicon"></span>
</label>
<ul class="menu">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/blogs">Text</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
and here is this css
* {
margin: 0;
padding: 0;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height 0.2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background 0.2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: "";
display: block;
height: 100%;
position: absolute;
transition: all 0.2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
So if ya run this code, you get that the h1's - bmw 4 series is going inside the program. How to fix that?
Please add top: 0 to your header class.
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
top: 0;
}
Please mark as accepted answer if this helps you. It is the tick in my answer.
I have this responsive nav I found on codepen.io. It works nicely on codepen.io however not so much in JS Fiddle (Included Below). When the screen is dragged over the 3 lines for the drop down icon link gets all wonky, it is not aligned propertly with the rest of the navigation. Also whenever there is a dropdown in use, the options no not align on top of each other (desktop or mobile). Related Dropdown CSS is below - Any help is appreciated Thanks. I put it into a JS Fiddle here.
// Dropdown list
ul li {
min-width: 190px;
a {
padding: 15px;
line-height: 20px;
}
}
}
}
}
// Dropdown list binds to JS toggle event
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
// Binds to JS Toggle
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: $nav-background;
height: $nav-height;
width: $nav-height;
}
#media only screen and (max-width: $breakpoint) {
// Hamburger nav visible on mobile only
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: $nav-height 0 15px;
ul {
display: none;
li {
float: none;
a {
padding: 15px;
line-height: 20px;
}
ul li a {
padding-left: 30px;
}
}
}
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: $breakpoint) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
span,
span:before,
span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: $nav-font-color;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
span:before {
top: -10px;
}
span:after {
bottom: -10px;
}
&.active span {
background-color: transparent;
&:before,
&:after {
top: 0;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
}
It was an issue with the SCSS. I just copied and pasted it over from your codepen, and it's working fine now in this jsfiddle I forked from your original. I added a negative margin to your nav-container class to correct the alignment issue with the toggle button. Additionally, you can use a flexbox to get the center-positioning for your menu items.
// Container with no padding for navbar
.nav-container {
margin: auto;
margin-top: -8px;
display: flex;
justify-content: center;
}
Please see: https://jsfiddle.net/z8rxe922/5/
You just have to use position as relative instead of absolute and in the responsive screen you have to set padding to 0.
.navmobile {
position: relative;
float:right;
}
#media only screen and (max-width: 800px) {
nav {
padding:0px;
}
}
What was your second question ? It is a bit unclear.
on my page: http://bn-servers.de i use the superfish.js and css.
Now my submenu have a big width but i dont know why.
my css code:
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu li {
position: relative;
}
.sf-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 99;
}
.sf-menu > li {
float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
display: block;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu ul ul {
top: 0;
left: 100%;
}
/*** DEMO SKIN ***/
.sf-menu {
float: left;
}
.sf-menu ul {
box-shadow: 2px 2px 6px rgba(0,0,0,.2);
min-width: 12em; /* allow long menu items to determine submenu width */
*width: 12em; /* no auto sub width for IE7, see white-space comment
below */
}
.sf-menu a {
text-decoration: none;
zoom: 1; /* IE7 */
}
.sf-menu a {
color: #13a;
padding: 10px;
text-align: left;
}
.sf-menu li {
background: #302f2f; /* Old browsers */
background: -moz-linear-gradient(top, #302f2f 0%, #000000 100%); /*
FF3.6-15 */
background: -webkit-linear-gradient(top, #302f2f 0%,#000000 100%);
background: linear-gradient(to bottom, #302f2f 0%,#000000 100%);
white-space: nowrap; /* no need for Supersubs plugin */
*white-space: normal; /* ...unless you support IE7 (let it wrap) */
-webkit-transition: background .2s;
transition: background .2s;
height:40px ;
}
.sf-menu ul li {
background: #ff9500;
}
.sf-menu ul ul li {
background: #ff9500;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
background: #ff7500;
/* only transition out, not in */
-webkit-transition: none;
transition: none;
}
/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
padding-right: 2.5em;
*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
/*.sf-arrows .sf-with-ul:after {
content: '';
position: absolute;
top: 50%;
right: 1em;
margin-top: -3px;
height: 0;
width: 0;
/* order of following 3 rules important for fallbacks to work */
/*border: 5px solid transparent;
border-top-color: #dFeEFF;
/*border-top-color: rgba(255,255,255,.5);
}
*/
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
margin-top: -5px;
margin-right: -3px;
border-color: transparent;
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
}
Have anyone a solution for this bug?
I want that the submenu have the same width like the parent menu item.
Please try this:
Remove width:700px from nav ul.
In your style.css line 943.
The width of 700px of the ul refers to the css style information
nav ul {
height: 40px;
margin: 0 auto;
padding: 0;
width: 700px;
}
You could avoid this with the css child selektor ( > ),
nav > ul {
}
but pay attention on words like "Rechenzentrum", that would be to long.
The min-width value is too much, you can change it to certain width like this one:
.sf-menu ul {
box-shadow: 2px 2px 6px rgba(0,0,0,.2);
width: 10em;
}
I have this css for my horizontal menu:
nav {
height: 40px;
width: 100%;
background: #F00;
font-size: 11pt;
font-family: Arial;
font-weight: bold;
position: relative;
border-bottom: 2px solid #FFFFFF;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav li {
display: inline;
float: left;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
nav a {
color: #000000;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
}
nav li a {
border-right: 1px solid #FFFFFF;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #000000;
color:#FFFFFF;
}
nav a#pull {
display: none;
}
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #FF0;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
rightright: 15px;
top: 10px;
}
}
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #FFFFFF;
}
}
how can i make the li links display in the centre?
here is a fiddle of the menu: http://jsfiddle.net/zJq52/
I would do this:
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
text-align: center; // add text-align
}
nav li {
display: inline; // no more float in here
}
DEMO HERE
Update 1:
To make the width auto:
nav a {
color: #000000;
display: inline-block;
width: auto; // changed this from width: 100px; to auto.
text-align: center;
text-decoration: none;
line-height: 40px;
}
DEMO HERE
Update 2:
Finished Version!
DEMO HERE
Live demo
Change nav a to this:
nav a {
text-align: center;
width: 100%;
}
I also have to mention that you have two nav as. You should merge them into one and apply a little change:
nav a {
color: #000000;
display: inline-block;
text-align: center;
text-decoration: none;
line-height: 40px;
width: 100%;
padding: 0 10px;
}
jsFiddle for the merged one and the result for me:
If you want to center the buttons as a row in the horizontal bar then just simply apply a width to the <ul> so add a new class: <ul class="clearfix cont"> and style it in a media rule so it won't affect the other layouts:
#media screen and (min-width: 600px) {
.cont {width: 380px;}
}
jsFiddle and the result:
Not sure exactly what you mean, but if you mean centering all the li in relation to its parent change the width from 600px to 400px
nav ul {
padding: 0;
width: 400px;
height: 40px;
display: block;
margin: 0 auto;
position: relative;
}
demo: - http://jsfiddle.net/zQehH/2/
UPDATED DEMO JSFiddle
Here is the correct way to do the stuff you want
CSS-
nav ul {
padding: 0;
margin: 0 auto;
width:800px;
text-align:center;
height: 40px;
}
nav li {
display: inline-block; //use inline block
}
nav a {
color: #000000;
display: inline-block;
padding: 0 20px; //use padding instead of width
text-decoration: none;
line-height: 40px;
}
Making the choice for a float isn't always the right one.
Your example contains a fixed width of 600px on the "nav ul" element is weird when you only have 4 elements of ~100px width. You can't center that...
I basically removed the float, and the clearfixes.
And then I've made it to contain the following based on how I'd do it..
nav {
margin: 0 auto;
text-align: center;
}
nav ul {
margin: 0 auto;
text-align: center;
width: auto;
}
nav ul li {
display: inline;
display: inline-block;
}
nav ul li a {
/*width: 100px;*/
width: auto;
padding: 0 10px;
}
My example:
http://jsfiddle.net/xewl/4CrdN/1/
I see that you have other versions that do kinda work as planned:
http://jsfiddle.net/zJq52/6/
You didn't set a width on "nav ul li a" here.
But why is there a width on "nav ul" of 400px?
Try This
nav li a {
border-right: 1px solid #FFFFFF;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
text-align:center; /*Added Line*/
}
Super simple.
Add text-align: center to nav ul and remove float: left from nav li.
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
text-align: center;
}
nav li {
display: inline;
}
Here's an updated fiddle: http://jsfiddle.net/qwUF7/