I am using a responsive navigation solution called Naver (http://formstone.it/components/Naver) for my websites. However, I am running into issues when I use the responsive navigation in a fixed width (like a grid for example). The responsive navigation takes the width of it's parent element and doesn't show at 100% width.
Here are two examples, one with the navigation inside of a grid and one just floated to the right:
http://jsfiddle.net/9FCq2/11/
http://jsfiddle.net/9FCq2/10/
Note: I have a couple of external resources in each of those fiddles.
I'm wondering how I can somehow adjust my CSS or JavaScript to make my responsive dropdown show at 100% when clicked on, no matter what the width of the parent element.
HTML
<div class="clearfix">
<div class="float-left">
<a href="http://concisecss.com">
<img src="http://concisecss.com/images/logo.svg" alt="Concise Logo" width="150" />
</a>
</div>
<div class="float-right">
<nav class="nav-responsive">
<ul class="list-inline list-unstyled">
<li>Welcome
</li>
<li>Why Concise
</li>
<li>Get Started
</li>
<li>Documentation
</li>
<li>Add-Ons
</li>
</ul>
</nav>
</div>
</div>
CSS
.naver .naver-handle {
color: inherit;
cursor: pointer;
display: none;
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
text-align: right;
text-transform: uppercase;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.naver .naver-wrapper {
height: auto;
}
.naver.enabled .naver-handle {
display: block;
}
.naver.enabled .naver-wrapper {
height: 0px;
overflow: hidden;
}
.naver.enabled .naver-wrapper ul li {
display: block;
padding: 8px;
text-align: left;
width: 100%;
}
.naver.enabled .naver-wrapper ul li:hover {
background: #f9f9f9;
}
.nav-responsive.naver .naver-handle:after {
content:"\f0c9";
font-family: FontAwesome;
text-align: right;
}
Naver jQuery library: http://formstone.it/components/Naver/jquery.fs.naver.js
You need to give the nav and it's top container width of 100%. By doing this you guarantee that both will take 100% of your screen's width (or whatever is the container both are in)
for your first jsfiddle use .naver-wrapper{width:100%;} because naver-wrapper is the top parent for your navigation. Check here
while in your second example you have to give both the navigation and the top container (parent) width:100% Check here
.naver-wrapper{width:100%;}
.float-right{width:100%;}
Use Below CSS. I hope this is useful for you:
CSS
.naver.enabled .naver-wrapper{
overflow: hidden; position: absolute; left: 0px; width: 100%; }
Related
For my webpage (Github Page), I want to make my menu sensible to the size of the screen, such that it collapses when they are too small and the elements do not fit. I am planning to add the following solution: w3schools, using a "burguer" icon to join all the elements when the screens are small.
I am able to create the menu with the different elements, to add the "burguer" icon, and then to hide it by default when the screen is big. However, the media queries and the js function must be wrong, because when I do my screen small, the "burguer" icon appears, but the other elements do not dissapear, and cliking on the "burguer" does nothing. I guess there is a mistakes or confussion with the id names somewhere. Could it be?
In the example from w3schools uses the div tab, but I am not. Is it indispensable for the example to work?
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("nav");
if (x.className === "header_nav") {
x.className += " responsive";
} else {
x.className = "header_nav";
}
}
/* Header_nav ----- DRAFT */
#page-wrapper {
padding-top: 3.5em;
}
#header_nav {
background: rgba(0, 0, 0, 0);
box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0);
cursor: default;
height: 3.5em;
left: 0;
line-height: 3.5em;
position: absolute;
top: 0;
width: 100%;
z-index: 100;
}
#header_nav .icon {
display: none;
}
#header_nav h1 {
height: inherit;
left: 1.25em;
line-height: inherit;
margin: 0;
position: absolute;
top: 0;
}
#header_nav nav {
position: absolute;
right: 1em;
top: 0;
}
#header_nav nav ul {
margin: 0;
}
#header_nav nav ul li {
display: inline-block;
margin-left: 1em;
}
#header_nav nav ul li a,
#header_nav nav ul li span {
border: 0;
color: inherit;
display: inline-block;
height: inherit;
line-height: inherit;
outline: 0;
}
#header_nav nav ul li a.button,
#header_nav nav ul li span.button {
height: 2em;
line-height: 2em;
padding: 0 1.25em;
}
#header_nav nav ul li a:not(.button):before,
#header_nav nav ul li span:not(.button):before {
margin-right: 0.5em;
}
#header_nav nav ul li.active>a,
#header_nav nav ul li.active>span {
color: #e44c65;
}
#header_nav nav ul li>ul {
display: none;
}
body.landing #page-wrapper {
padding-top: 0;
}
body.landing #header_nav {
background: transparent;
box-shadow: none;
position: absolute;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
#header_nav a:not(:first-child) {
display: none;
}
#header_nav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
#header_nav.responsive {
position: relative;
}
#header_nav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
#header_nav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<html>
<head>
<title>Eduardo Alvarado</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="is-preload">
<!-- Header Navigation Menu -->
<section id="header_nav">
<nav id="nav">
<ul>
<li>
<a href="index">
<p style="color:white">Home</p>
</a>
</li>
<li>
<a href="">
<p style="color:white">Research</p>
</a>
</li>
<li>
<a href="">
<p style="color:white">Game-dev</p>
</a>
</li>
<li>
<a href="photography">
<p style="color:white">Photography</p>
</a>
</li>
<li><i class="fa fa-bars"></i></li>
</ul>
</nav>
</section>
The whole code can be found in the repo (Github Repo).
Can you see maybe the error that I am not able to spot? Why the example from w3school is not applicable?
I would really appreciate your help here. Thank you very much in advance!
Here's a small reproducible solution based on your code:
https://jsfiddle.net/hneromu4/5/
I added a class fixed to the link elements that were supposed to stay when we resized the window:
<section id="header_nav">
<nav id="nav">
<ul>
<li class="fixed">Home</li>
<li>Research</li>
<li>Game-dev</li>
<li>Photography</li>
<li class="fixed hamburguer"><i class="fa fa-bars"></i></li>
</ul>
</nav>
</section>
I also tweaked your css and js.
In your CSS and HTML I have made some alterations as your hamburger menu was inside the same thing which you were trying to hide which is not really a good idea I have also adjusted your CSS slightly as you were setting a position to relative but not setting display to block. Hope this helps!
CSS (line 2525 - 2547):
#media screen and (max-width: 600px) {
#nav {display: none;}
#header_nav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
#nav.responsive {position: relative;display: block;}
#header_nav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
#nav.responsive a {
float: none;
display: block;
text-align: left;
}
}
HTML:
<!-- Header Navigation Menu -->
<section id="header_nav">
<a class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a><nav id="nav" class="header_nav">
<ul>
<li><p style="color:white">Home</p></li>
<li><p style="color:white">Research</p></li>
<li><p style="color:white">Game-dev</p></li>
<li><p style="color:white">Photography</p></li>
</ul>
</nav>
</section>
How to apply a transform to element without affecting position: absolute sibling. Been playing with this for a few hours to no avail. I think the code will explain clearer than I can put into words.
The below works as intented, until transform: translateX(10px) is applied to the ul. I need the transform to move the ul based on screen size, it's a longer list in reality. Can the hover state be preserved? Thanks, webstudent
.relative {
position: relative;
}
nav {
min-width: 100vw;
height: fit-content;
overflow: hidden;
}
ul {
display: block;
min-width: 100vw;
list-style-type: none;
margin: 0;
padding: 0;
/* breaks stacking order */
/* transform: translateX(10px); */
}
li {
display: inline-block;
}
li a {
display: block;
padding: 4px 8px;
font-size: 1rem;
max-height: 1rem;
}
li a:hover {
background-color: red;
}
.absolute-sibling {
position: absolute;
left: 0;
top: calc(1rem + 8px);
width: 100vw;
height: fit-content;
display: none;
}
li a:hover + .absolute-sibling,
.absolute-sibling:hover {
background-color: red;
display: block;
}
<div class="relative">
<nav>
<ul>
<li>
<a>text one</a>
<!-- absolute child of .relative -->
<div class="absolute-sibling">content one</div>
</li>
<li>
<a>text two</a>
<!-- absolute child of .relative -->
<div class="absolute-sibling">content two</div>
</li>
<li>
<a>text three</a>
<!-- absolute child of .relative -->
<div class="absolute-sibling">content three</div>
</li>
</ul>
</nav>
</div>
Broken version with transform included, jsfiddle to reduce wall of code. Same code, apart from transform: translate(10px);
Update:
This describes the issue I'm trying to counter CSS stacking contexts
Also, for instance if I replace the transform: translateX(10px); with margin-left: 10px; everything is as intended. Just I'd like to use the transform for animation smoothness.
Heres one more solution, set the transform on your parent component div.relative and remove it from the ul. (you could also wrap that div and transform that if it works better for your layout)
Change this line in your css
.relative {
position: relative;
transform: translateX(10px)
}
If this still breaks your design then you need to rethink your HTML. As per your article setting a transform creates a new stacking context causing these weird effects. By setting the transform on a parent or wrapper element then you are moving that context up the chain and the child elements should behave like normal.
I understand this seems to be a common request but after digging through several posts I can't find a solution and/or lack the knowledge to tailor the javascript to my needs.
I am looking for a way to have my Navbar stick to the top of the page once it reaches the top (scrolling far enough down). The issues I have is that my Navbar is currently positioned using flex, and not already at the top of the page.
CODEPEN
* {margin:0;padding:0;box-sizing:border-box}
html, body {text-align: center;}
#logo2 img {
margin: 0 auto;
margin-top: 3%;
}
.menu2 {
display: flex; /* displays children inline */
margin: 0;
width: 100%;
margin-top: 2%;
list-style-type: none;
background: linear-gradient(#3E3E3E, #2B2B2B);
}
li {
flex: 1; /* each takes as much width as it can, i.e. 25% */
border-right: 1px solid #232323;
}
li:last-child {
border: none;
}
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 20px 0;
}
li a:hover {
background: linear-gradient(#404040, #3E3E3E);
}
.active {
background: linear-gradient(#2B2B2B, #232323);
}
<header id="logo2">
<img src="logo.png" alt="Logo"/>
</header>
<nav>
<ul id="navigation" class="menu2">
<li>HOME</li>
<li class="active">GALLERY</li>
<li>ART</li>
<li>CONTACT</li>
</ul>
</nav>
</body>
Well I eventually found an answer to my question. For those of you interested.
JS
var num = 240; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu2').addClass('fixed');
$('.main').addClass('main2');
} else {
$('.menu2').removeClass('fixed');
$('.main').removeClass('main2');
}
});
.menu2 {
width: 100%; height: 100%;
background-color: rgb(240, 240, 240);
position: sticky;
left: 0; top: 0;
}
.emptySpace {width: 100%; height: 1000000px;}
<span class="menu2">
Link 1
Link 2
Link 3
Link 4
Link 5
</span>
<!-- the div below is to allow you to scroll so you can see how it works (it's absolutely useless) -->
<div class="emptySpace"></div>
If I'm understanding your question correctly, you can use
HTML:
<span class="menu2">
Link 1
Link 2
Link 3
</span>
CSS:
.menu2 {position: sticky;}
This will cause the navigation bar to stick to the top of the screen as the user scrolls down.
You can read into this a bit more at W3Schools.
Also, check out my Weave at LiveWeave.
How do I push the image to the side and to the top?
Also how do I control each UL LI on their own and not as a general?
Current Result
HTML
<div class="header">
<h1>Merry Christmas</h1>
<ul id="lil">
<li>About Us</li>
<li>Christmas</li>
<li>Snow</li>
<li>Other Holidays</li>
</ul>
<img src="http://ntt.cc/wp-content/uploads/2009/11/Bell.png" />
</div>
<aside id="sideBar">
<ul>
<li>What is Christmas</li>
<li>Do I celebrate Christmas</li>
<li>Is Christmas fun?</li>
<li>Conclusion</li>
</ul>
</aside>
CSS
div.header {
background-color: #E32636;
color: white;
text-align: center;
padding: 2px;
margin: 0px;
font-family: 'Nemo Nightmares', Arial;
font-size: 300%;
}
ul#lil li {
list-style-type: none;
display: inline;
color: white;
font-family: 'Courier New';
text-align: center;
margin: 6px;
}
img {
float: left;
width: 270px;
height: 270px;
position: relative;
bottom: 190px;
}
a:link {
text-decoration: none;
color: white;
}
a:hover {
color: white;
text-decoration: underline;
}
a:visited {
text-decoration: none;
color: white;
}
ul li {
color: black;
list-style-type: none;
margin: 12px;
font-size: 100%;
position: relative;
right: 350px;
}
#sideBar {
background-color: #87A96B;
float: left;
left: 350px;
}
First off, you have some syntax errors in your HTML.
1) Several of you anchor tags are not closed. You forgot the / in the closing tags.
2) Your image tag is inside a <ul>, but not inside a <li>. Anything you put in a list tag needs to be a <li>.
Corrected HTML:
<div class="header">
<h1>Merry Christmas</h1>
<img src="http://ntt.cc/wp-content/uploads/2009/11/Bell.png" class="bells" />
<ul id="lil">
<li>Aboutus</li>
<li>Christmas</li>
<li>Snow</li>
<li>OtherHolidays</li>
</ul>
</div>
<aside id="sideBar">
<ul>
<li>What is christmas</li>
<li>Do I celebrate Christmas</li>
<li>Is Christmas fun?</li>
<li>Conclustion</li>
</ul>
</aside>
There are a lot of options here.. you could use absolute positioning for a quick fix..
img{
position: absolute;
top: 10px;
left: 10px;
}
You could use media queries to make it different sizes deending on the size of the screen..
/* Large desktop */
#media (min-width: 1200px) {
img{
width:30px;
height: 30px;
}
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
img{
width:25px;
height: 25px;
}
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
Or any number of other tricks, but ideally, you should use some kind of scaffolding. Something like Bootstrap makes this kind of thing much easier to manage.
If you're interested in Bootstrap, these 3 links should help get you going very quickly. Google is now checking for mobile compatibility, so using BS will also improve your search ranking.
This one is a single page blank bootstrap template that pulls the BS files from a CDN so you can get started without downloading anything. Just copy this into a blank html document and you're ready to use any of the examples in the next two links.
This one explains the scaffolding and how to position items on the page. Bootstrap is a responsive framework, meaning it automatically resizes the page for smaller devices.
And this one explains all the built-in styling tools it comes with. Jumbotron might be useful for this.
At the moment, I'm developing a layout for work, and I'm just a tiny bit stuck with a dynamic drop down menu. I'm using a child 'ul' within an 'li' element that will display the children of the navigation links - but the 'li' above (so the main one, that you hover on to view the children), stretches to the length of the 'ul', which is, of course, defined by the width of the 'li' elements inside that.
Also, I'm using jQuery to display the child items when the user hovers over the parent navigation item.
However, I need this not to happen! Here's a screenshot link: http://d.pr/v5Wk (I'm sorry - I'm not registered, so I can't post images! D: )
Basically, I need to get rid of the gap on the right of 'Section One', dynamically, without defining any preset widths.
Here's the HTML:
<div class="menu">
<ul class="navigation">
<li>
Section One
<ul class="children">
<li>
Child Item One
</li>
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
</ul>
</li>
<li>
Section Two
</li>
<li>
Section Three
</li>
<li>
Section Four
</li>
<li>
Section Five
</li>
<li>
Section Six
</li>
</ul>
</div>
And here's the CSS:
.menu { width: 100%; overflow: hidden; display: block; position: absolute; margin: 75px auto; background: #666 url('../image/stripe.png'); }
ul.navigation { list-style-type: none; width: 900px; margin: 0 auto; }
ul.navigation li a { color: #fff; text-decoration: none; display: block; padding: 10px; }
ul.navigation li a:hover { color: #fff; background: #444 url('../image/stripe_active.png');}
ul.navigation li { float: left; }
ul.navigation li ul.children { list-style-type: none; display: block; overflow: hidden; position: relative; z-index: 1; }
ul.navigation li ul.children li { color: #fff; float: left; font-size: 11px; white-space: nowrap; }
Any help on this would be great!
Many thanks,
Matt
ul.navigation li ul.children {
list-style-type: none;
display: block;
overflow: hidden;
position: absolute;
z-index: 1;
top: 2em;
left: auto;
right: auto;
}
If you still can't see them, add height: 5em to ul.navigation
Position:Absolute causes an element to be rendered at a specific spot on the page, taking it out of the normal flow. Since it is no longer being rendered inside the topnav li, it doesn't cause it's width to be too large.
Have you tried to position:absolute the children?
Does it need to be an ul/li solution? wouldn't it be easier to update the contents of the submenu with javascript when you hover over the top nav?