i have an example (JSFiddle Example), where i want the content of the nav bar to be scrollable, if it is cut off by the screen size of the browser.
See Normal Size and Small Size for current problems.
A requirement is that the left part of the screen (250px) is covered by the navigation bar (or any parent) if the screen size is > 768px.
I did not achieve any satisfying result so far, therefore i'm aksing for help!
Thanks in advance!
CSS
#media (min-width: 768px)
{
.sidebar-main.expanded {
width: 250px;
}
.sidebar-main {
position: fixed;
height: 100%;
}
.sidebar-main .navbar {
height: 100%;
}
.sidebar-main .navbar .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
}
.sidebar-main .navbar-header {
float: none !important;
}
.sidebar-main .navbar-collapse {
padding: 0px;
max-height: none;
}
.sidebar-main ul {
float: none;
&: not {
display: block;
}
}
.sidebar-main li {
float: none;
display: block;
}
}
Fixed this problem by setting the height manually to a certain PX value in Javascript, although i wanted to avoid this, it seems to me as the only solution.
Related
Just starting out with some more css, using the examples on w3schools to make a responsive nav bar. I got part of it moved to where I want (the icon for when the screen is smaller) but I can't figure out how to move the actual nav bar text.
Not entirely sure what I should do, tried a couple things but with my limited knowledge things go all wonky. Im pretty sure I know where the edit would take place, if Im right it would take place in this part of the css
.navbar.responsive a {
float: right;
display: block;
text-align: left;
}
Heres the full css
#charset "UTF-8";
/* CSS Document */
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
float: right;
margin-top: 50px;
margin-right: 50px;
}
.navbar a {
display: block;
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #C58485;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.navbar a, .dropdown .dropbtn {
display: none;
}
.navbar a.icon {
float: right;
display: block;
position: absolute;
top:10px;
right: 45%;
}
}
#media screen and (max-width: 600px) {
.navbar.responsive {position: static;}
.navbar.responsive .icon {
float: right;
display: block;
top:10px;
right: 45%;
}
.navbar.responsive a {
float: right;
display: block;
text-align: left;
}
.navbar.responsive .dropdown {float: none;}
.navbar.responsive .dropdown-content {position: absolute;}
.navbar.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
Basically what its doing is when Im in a smaller window and the responsive page pops up, I want the text to be centered and in a line straight across when you click the 3 line dropdown.
Proof of concept: https://imgur.com/a/Ho5JENI
What it does right now: https://imgur.com/a/j2oWwlm
Here is a basic responsive navbar example hope this helps
EDIT
Explanation: inherently most elements in HTML are block level elements meaning that they stack on top of each other. An Anchor or "a" tag is an inline element meaning they will stay on the same line with other inline elements. In most cases you should start by framing out your page (just using HTML) this will allow you to see which elements stack on top of each other (block elements). If most of your elements stack that means they will easily fit on a small screen (mobile device). I can see you have a media query so I wont waste your time explaining that so... once you have the real estate (tablet or desktop) you then want to make some of your block elements inline, inline-block or float them depeding on how you want them to react with the other elements beside them. The easiest way (in this case) is to use flexbox which is great for laying out objects in 2D space. W3Schools: More information on flexbox here From there it is all visual and experience preference. Please let me know if you have any questions comments or concerns in the comments, I will be more than happy to help you. Good Luck and Keep Coding
nav {
display: flex;
flex-direction: column;
align-items: center;
}
ul {
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}
#media only screen and (min-width: 768px) {
ul {
display: flex;
}
li a {
padding: 1rem;
}
}
<nav>
<button>☰</button>
<ul>
<li><a href="#">home<a></li>
<li><a href="#">about<a></li>
<li><a href="#">portfolio<a></li>
<li><a href="#">prints<a></li>
<li><a href="#">contact<a></li>
<ul>
<nav>
I am learning how to make responsive websites. I downloaded Responsive Grid System and I am learning responsiveness with this system (you'll see what I have In html on screenshot).
Now I have some troubles with positioning. I use media queries. For mobile view from 320px to 480px I have no problem, but then when I want to make logo centered in range 480px to 768px I have problem with col span_6_of_12 (you'll see that also on the screenshot). I have logo in one col span_6_of_12 and then I have menu in second col span_6_of_12. When I want to make logo centered, this menu col span_6_of_12 is still there and I can't make this logo centered (I hope you understand me.)
HTML and Chrome view
- Here is screenshot of my HTML and Chrome view on site.
And here is CSS code:
html {
background-color: #FFF;
}
body {
width: 100%;
margin: 0 auto;
}
img {
width: 100%;
}
a {
text-decoration: none;
}
nav ul {
width: 100%;
text-align: center;
padding: 0;
margin: 10px 0;
}
nav li {
display: block;
padding: 10px;
}
#menu {
display: none;
}
#media screen and (min-width: 320px) and (max-width: 480px) {
#logo {
font-size: 2em;
text-align: center;
text-transform: uppercase;
margin: 0 auto;
}
#menu {
display: none;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px;
}
}
#media screen and (min-width: 480px) and (max-width: 768px) {
#menu {
display: none;
}
#logo {
text-align: center;
font-size: 2em;
text-transform: uppercase;
margin: 0 auto;
}
}
I have a navbar every thing looks great until it goes responsive. the bottom drop down has a 5 px gap all the way around it.
https://jsfiddle.net/nc2hamed/5/
i have tried adding and removing padding on the
.expand {
max-height: 40em;
}
The top gap is because your .menu has big padding-top.
The left and right gaps are there because your .wrap has width: 95% (not 100%).
So this code will fix both issues:
.navbar {
width: 105%;
margin: 0 -2.5%;
}
#media only screen and (min-width: 800px) {
.navbar {
width: auto;
margin: 0;
}
.navbar .menu {
padding-top: 20px;
}
}
Your problem is in your .navbar .menu element. You need to set the padding-top to 0px unless your screen height is not mobile.
You should remove some padding-top on .navbar .menu and set the max-width to 100%
#media(your_media_query) {
.navbar .menu {
padding-top: 25px;
}
.wrap {
width: 100%;
max-width: 100%;
}
}
Fiddle.
This is literally the 'Off Canvas Reveal' demo from Jasny located here. All I did was extend the page content so that it needed a scrollbar.
After clicking the hamburger menu, the page contents become frozen/unscrollable. How do I fix this behavior? I want to be able to continue scrolling the page while the menu is out.
CSS:
html, body {
height: 100%;
}
.navbar-toggle {
float: left;
margin-left: 15px;
}
.navmenu {
z-index: 1;
}
.canvas {
position: relative;
left: 0;
z-index: 2;
min-height: 100%;
padding: 50px 0 0 0;
background: #fff;
}
#media (min-width: 0) {
.navbar-toggle {
display: block; /* force showing the toggle */
}
}
#media (min-width: 992px) {
body {
padding: 0;
}
.navbar {
right: auto;
background: none;
border: none;
}
.canvas {
padding: 0;
}
}
You just need to add
html,
body{
overflow-y:scroll!important;
}
By default jasney adds overflow:hidden; to the body
Jsfiddle http://jsfiddle.net/z3wfct19/1/
SOLVED: See answer below. I'd still love to know WHY this happened and why the fix worked.
UPDATE: Could my problem be related to this webkit bug:
Bug 53166: 'display' styles in media queries don’t get re-applied correctly after resizing?
When my desktop-size media query kicks in, something happens to my nav bar that doesn't "unhappen" when the window width drops back below that size. The issue only appears to happen in Chrome or Safari. I believe it has to do with the display property, and it feels like a bug.
You can see the behavior here.
To reproduce mobile menu problem, start with Chrome / Safari or iPad Safari.
Start with browser wider than 1023px (landscape on iPad)
Make browser smaller than 1024px (or rotate iPad)
Click Menu -- problem #1 appears
To reproduce desktop menu problem
Start with browser wider than 1023px
Make browser smaller than 1024px
Make browser wider than 1023px again
Problem #2 appears
Notes:
If I start below 1024px, everything works great.
If I start below 1024px enlarge the window over 1024px, everything works great.
If I start above 1024px, everything works great.
This ONLY breaks if I start above 1023px and resize lower.
I think the issue has something to do with the the table-cell CSS property I'm using, but I can't figure it out.
There's some JS going on here but the problem appears even with JS disabled.
For now I'll include the Header HTML / CSS in hopes that the answer is something simple.
HTML
<div class="header">
<img class="logo" src="/assets/logo.png" />
<button id="toggle" class="closed"></button>
</div>
<div class="spacer clearfix"></div>
<div id="nav">
<ul class="primary-nav">
<li>Sundays</li>
<li>Learn More</li>
<li>Citygroups</li>
<li class="desktop-logo"><img src="/assets/logo.png" /></li>
<li>Discipleship</li>
<li>Sermons</li>
<li>Get in Touch</li>
</ul>
</div>
Here's the CSS, including the Media Queries
.header {
position: absolute;
width: 100%;
height: 70px;
z-index: 9999;
background: #FFF;
}
img.logo {
float: left;
width: 40.3125%; /* 129px / 320px */
margin: 24px 0 23px 9.375%; /* 24 0 23 30 */
}
.spacer {
height: 70px;
}
/* Main Nav */
button#toggle {
float: right;
border: none;
width: 6.5625%;
min-height: 23px;
margin: 24px 9.375% 23px 34.375%;
padding: 0;
background: url(assets/nav-toggle.png) center no-repeat;
}
button#toggle.opened {
background: url(assets/nav-toggle-opened.png) center no-repeat;
}
#nav {
width: 100%;
height: -moz-calc(100% - 70px);
height: -webkit-calc(100% - 70px);
height: calc(100% - 70px);
z-index: 9999;
}
.js #nav {
clip: rect(0 0 0 0);
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
}
#nav ul {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: table;
list-style: none;
background-color: #363636;
border-bottom: solid #1E1E1E 1px;
}
#nav li {
width: 100%;
display: table-row;
}
#nav li a {
display: table-cell;
vertical-align: middle;
border-top: solid #1E1E1E 1px;
padding: 0 0 0 9.375%;
}
#nav li.desktop-logo { /* Necessary for centered logo on wide displays */
display: none;
}
/*--------------------------------------------------
4. HOME - LARGE MOBILE
- Min-Width: 321px -
---------------------------------------------------*/
#media screen and (min-width: 321px) {
img.logo {
max-width: 159px;
margin: 20px 0 21px 7.03125%; /* 20 0 21 54 */
}
h1 {
font-size: 2.7969em;
}
h5 {
font-size: 1.3125em;
}
}
/*--------------------------------------------------
4. HOME - MOBILE LANDSCAPE
- Min-Width: 321px -
- Orientation: Landscape -
---------------------------------------------------*/
#media screen
and (min-width: 321px)
and (max-width: 768px)
and (orientation: landscape) {
.headline {
display: block;
width: auto;
height: auto;
overflow: none;
margin-top: 5%;
}
}
/*--------------------------------------------------
4. HOME - SMALL TABLET / LARGE PHONE
- Min-Width: 481px -
---------------------------------------------------*/
#media screen
and (min-width: 481px) {
img.logo {
max-width: 159px;
margin: 20px 0 21px 7.03125%; /* 20 0 21 54 */
}
h1 {
font-size: 3.3438em;
}
h5 {
font-size: 1.625em;
}
}
/*--------------------------------------------------
5. HOME - LARGE TABLET LAYOUT
- Min-Width: 601px -
---------------------------------------------------*/
#media screen
and (min-width: 601px) {
h1 {
font-size: 4.5625em;
}
h5 {
font-size: 2.25em;
}
}
/*--------------------------------------------------
5. HOME - DESKTOP LAYOUT - Min-Width: 1024px
---------------------------------------------------*/
#media screen
and (min-width: 1024px) {
.header {
position: fixed;
top: 0;
height: 87px;
background: none;
display: none;
}
img.logo, .spacer {
display: none;
}
.js #nav {
position: relative;
}
.js #nav.closed {
max-height: none;
}
#nav-toggle {
display: none;
}
button#toggle {
display: none;
}
#nav {
height: auto;
}
#nav ul {
height: 87px;
width: 66.6666666667%;
min-width: 1024px;
margin: 0 auto;
border: 0;
background-color: #fff;
}
#nav li {
width: auto;
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: .875em;
}
#nav li a {
display: inline-block;
vertical-align: none;
text-align: center;
line-height: 87px;
border: 0;
padding: 0;
margin: 0;
}
#nav li a, #nav li a:active, #nav li a:visited {
color: #58585A;
}
#nav li a:hover {
color: #FAAC1D;
}
#nav li.desktop-logo {
display: table-cell;
width: 206px;
padding: 0 20px;
}
#nav li.desktop-logo img {
padding: 0;
}
#nav li.desktop-logo a {
display: inline;
line-height: 0;
}
.flexslider {
height: -moz-calc(100% - 87px);
height: -webkit-calc(100% - 87px);
height: calc(100% - 87px);
}
.headline hr {
width: 50%;
}
}
Sorry to be answering so many of my own questions. No one saw this one. I'm sure this will help someone.
I saw this similar question regarding the webkit bug. Their solution to add display: table-row to the UL tag worked. However, in my situation, I needed the UL to be centered with a width < 100%, both of which weren't possible as a table-row.
The final solution was to move display: table to the parent div (#nav). When I did this and removed it from the <ul> tag, everything worked perfectly. I don't know why.
The original link is updated and working now.
Final working CSS (media query only):
/*--------------------------------------------------
5. HOME - DESKTOP LAYOUT - Min-Width: 1024px
---------------------------------------------------*/
...
.js #nav {
position: relative;
display: table;
}
...
#nav ul {
height: 87px;
width: 66.6666666667%;
min-width: 1024px;
margin: 0 auto;
border: 0;
background-color: #fff;
}