I have an unordered vertical list as a navigation bar that is changing to a horizontal list on mobile devices. How do I prevent the list from switching to vertical and stay horizontal within the div element it's in.
Side note: the resulting code snippet is showing the list as vertical, but I suspect it's because the window is being perceived as mobile given it's width
Edit: there also appears to be a small scrollable gap to the right of the screen on mobile.
body {
background-color: #E5E5E5;
}
#nav_bar {
background-color: #2F2F2F;
height: 60px;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
#nav_logo {
background-image: url('../img/nav_logo.png');
width: 250px;
height: 40px;
top: 15%;
left: 10%;
position: absolute;
}
#media (max-width: 629px) {
div#nav_logo {
background-image: url('../img/nav_logo_mobile.png');
width: 60px;
height: 39px;
}
}
ul.nav {
list-style-type: none;
left: 70%;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
}
li.nav {
float: left;
}
li.nav a {
font-family: 'Roboto Condensed', sans-serif;
display: block;
color: white;
text-align: center;
padding: 18px;
text-decoration: none;
}
li.nav a:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Oswald|PT+Sans" rel="stylesheet">
</head>
<body>
<div id="nav_bar">
<div id="nav_logo"></div>
<ul class="nav">
<li class="nav">HOME</li>
<li class="nav">CONTACT</li>
<li class="nav">ABOUT</li>
</ul>
</div>
</body>
</html>
I think the problem is with "left: 70%". On mobile devices the space is just not enough to keep the links in a line.
Give them more space on small screens. I would recommend to set the right value instead of left, btw. On small screens you could just set it to right: 0.
I found some code on w3schools and tried to implement it in your code. This is what I came up with:
ul.nav {
position: relative;
overflow: hidden;
background-color: #333;
}
li.nav {
float: left;
}
li.nav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
Related
I came across a problem on my HTML file. I'm fairly new to HTML, and as I was making a topbar for my static website here, I tried to add a hover to it, but it isn't working correctly, only at the "search" and "cart" buttons (and it kinda works at "contact us" too, but only at its right side) .
So, I'm not sure why the hovering doesn't work on all buttons, even though the topbar looks ok at first glance. Am I overriding something I shouldn't? This got me confused. Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#topBox {
height: 250px;
margin-top:-50px;
margin-left: auto;
margin-right: auto;
background: #cbe9f3;
border-radius: 15px;
}
#container {
margin-left: 27px;
margin-top: 41px;
position: fixed;
color: white;
font-family: "Cute Aurora Regular";
}
.topnav {
overflow: hidden;
font-family: "Cute Aurora Regular";
background-color: transparent;
border: #c9c7c7 0.1px solid;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
border-left: none;
border-right: none;
}
.topnav a {
float: left;
color: #b47d50;
text-align: center;
margin-left: 27px;
padding: 14px 16px;
margin-right: -20px;
text-decoration: none;
font-size: 19px;
font-weight: bold;
}
.topnav a:hover {
color: #ecb2ad;
}
.topnav a.search {
margin-left: 290px;
}
.topnav a.cart {
margin-left: 25px;
}
br {
display:none;
}
/* Desktop grande */
#media (min-width: 1025px) {
#topBox {
width:1000px;
}
#container {
font-size: 600%;
}
#containerBunny {
width: 250px;
margin-left: 550px;
margin-top: 150px;
}
.topnav {
width: 1000px;
}
}
/* Desktop pequeno */
#media (min-width: 769px) and (max-width: 1024px) {
#topBox {
width:750px;
}
#container {
font-size: 500%;
}
#containerBunny {
width: 200px;
margin-left: 460px;
margin-top: 170px;
}
.topnav {
width: 745px;
}
}
/* Tablets */
#media (min-width: 481px) and (max-width: 768px) {
}
/* Mobile */
#media (min-width: 320px) and (max-width: 480px) {
#topBox {
width:1000px;
}
#container {
font-size: 520%;
}
#containerBunny {
width: 250px;
}
br {
display: block;
}
}
</style>
</head>
<body>
<div id="topBox">
<div id="container">
<p>Bunny <br>Shop</p>
</div>
<img id="containerBunny" src="images/molangMilk.png" alt="">
</div>
<div class="topnav">
HOME
NEW
SALE
PRODUCTS
CONTACT US
<a class="search" href="#search">SEARCH</a>
<a class="cart" href="#cart">CART</a>
</div>
</body>
</html>
Two quick and lazy solutions are to add the following to the #topBox div:
pointer-events: none; will allow you to click "though" the div to the navbar
height: auto; will prevent the div from overlapping the navbar
The reason the rollover isn't working as expected is the #container & #containerBunny divs are covering the topnav div.
You can see the overlapping divs here
I recommend adding the Pesticide Chrome extension to help visualise your divs and make it easier to see what's going on.
Your element with the ID of "container" is overlaying your navigation buttons. It's not to do with your hover logic.
You need to adjust your layout so container no longer sits on top, as mouse events only propagate to the topmost element.
Assuming container is for holding your "Bunny Shop" header. I would suggest adjusting the height of this element. You will probably find that it doesn't need to use the "fixed" positioning, and can sit relative to it's parent component. Fixed sits an element absolutely, relative to the viewport itself.
Your container element overlap the topbar or navigation item due to you fixed the container.
chnage your code from
#container {
margin-left: 27px;
margin-top: 41px;
position: fixed; // remove it.
color: white;
font-family: "Cute Aurora Regular";
}
to
#container {
margin-left: 27px;
margin-top: 41px;
color: white;
font-family: "Cute Aurora Regular";
}
Now you can hover navigation.
Okay, been trying to find an answer and testing this out for a couple hours now to no avail. I couldn't find the proper answer on here or through my own trial and error so forgive me if this is a duplicate. Here's what I need help with: I'm trying to change the nav text color when I'm scrolled to another part in the page. So, if I'm scrolled over the #firstpane id/div the 'about' text in my navbar will be black. When the #secondpane id/div is scrolled over the navbar text 'skills' will be black. When scrolled over the #thirdpane id/div the text 'contact' in my navbar will turn black. That sort of thing is what I'm trying to accomplish here.
Does anybody know how to approach this using pure css or javascript, no jQuery? I have an idea of how to do it in jQuery, just can't use it in this instance, so please no guidance suggesting jQuery.
Thanks.
body {
background-image: url("images/someTree.jpg");
background-size: cover;
font-family: 'Roboto', sans-serif;
margin: 0;
}
header {
width: 100%;
height: 85px;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
z-index: 1000;
background-color: #96C339;
}
header h1#logo {
display: inline-block;
float: left;
font-family: "Monsterrat", sans-serif;
font-size: 40px;
color: #FFF;
font-weight: 400;
margin-left: 35px;
}
header nav {
display: inline-block;
float: right;
}
header nav a {
line-height: 100px;
margin-left: 20px;
margin-right: 20px;
color: #FFF;
font-weight: 700;
font-size: 20px;
text-decoration: none;
}
header nav a:hover {
color: #111;
}
#media all and (max-width: 600px) {
header h1#logo {
font-size: 30px;
display: block;
float: none;
margin: 0 auto;
height: 100px;
line-height: 55px;
text-align: center;
}
header nav {
display: block;
float: none;
height: 50px;
text-align: center;
margin: 0 auto;
margin-top: -65px;
}
header nav a {
font-size: 15px;
line-height: 50px;
margin: 0 5px;
}
}
#firstpane {
background-color: #FFF;
margin-left: 0;
height: 100vh;
margin: auto;
opacity: 0.8;
}
#secondpane {
background-color: #FFF;
height: 100vh;
margin: auto;
margin-top: 6%;
opacity: 0.8;
}
#thirdpane {
background-color: #FFF;
height: 100vh;
margin: auto;
margin-top: 6%;
opacity: 0.8;
}
::selection {
background: #000;
/* WebKit/Blink Browsers */
}
::-moz-selection {
background: #000;
/* Gecko Browsers */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<title>Portfolio Stuff</title>
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="container">
<header>
<h1 id="logo">Some Name</h1>
<nav>
About
Skills
Contact
</nav>
</header>
<!-- /header -->
<div id="firstpane"></div>
<div id="secondpane"></div>
<div id="thirdpane"></div>
<!-- end of container -->
</div>
<script type="text/javascript" src="portfolio.js"></script>
</body>
</html>
You could try using JavaScript. In order to do so simply use window.onscroll (to fire a function every time you scroll). Within that function you would have to check wheter a specific part of your markup falls behind your header. If so, you just add a class to your nav. On the other hand, if your desired element is back on it's initial place (or at least not behind your header anymore) you can simply remove that class from your nav.
Your code could look like this. Of course you would need to extend this to also handle your 1st and 3rd nav/div. But at least I guess this should help you on your way achieving what you want.
// Get the necessary elements first
var skills = document.getElementsByClassName('secondpanenav')[0];
var second = document.getElementById('secondpane');
// Trigger event every time you scroll
window.onscroll = function() {
// Get boundries of your div (top, bottom, left, right)
var position = second.getBoundingClientRect();
// Check your divs position and add/remove your desired class
if (position.top < 85) {
skills.classList.add('redColor');
} else {
skills.classList.remove('redColor');
}
}
Demo: https://jsfiddle.net/vw68eaqv/1/
I'm working on designing a website and I'm running into issues with formatting around list items connected with links. If you run the code through the browser it'll show the site of where I am right now. I want the "Buttons" to move away from each other so it's a nice vertical display of them rather than overlapping each other. Also I've been trying to figure out how to adjust the width of the borders so all three buttons are the same width.
Also I've been trying to make the border colors change when the mouse hovers over it but none of the answers from other related posts on Stack Overflow have worked for me.
/* Global Layout Set-up */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
text-align: center;
/*font-family: 'Roboto', sans-serif;*/
color: #fff;
background: #384047;
}
/* Link Styles */
a {
text-decoration: none;
color: #39add1;
}
a:hover {
color: #7dc9e1;
}
.container {
max-width: 800px;
min-width: 80%;
max-height: 400px;
min-height: 60%;
background: #dfdfdf;
position: absolute;
margin: 10% 10% 10% 10%;
}
.nav {
max-width: 110px;
min-width: 55px;
max-height: 200px;
min-height: 100px;;
background: #222;
position: absolute;
left: 40%;
top: 50%;
}
.box p {
text-align: center;
}
a {
text-decoration: none;
color: #7dc9e1;
}
a:hover {
color: #39add1;
border-color: #39add1;
}
.nav {
list-style: none;
padding-left: 0;
}
#welcome a{
border: solid #7dc9e1; 5px;
padding: 10px;
}
#s-in a{
border: solid #7dc9e1; 5px;
padding: 10px;
margin-top: 50px;
}
#s-up a{
border: solid #7dc9e1; 5px;
padding: 10px;
margin-top: 100px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testing Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styling.css">
<link href="#googlefont"></head>
<body>
<section class="container">
<div class="box">
<h1>Testing Site</h1>
<h4>demo website</h4>
<ul class="nav">
<li id="welcome">WELCOME</li>
<li id="s-in">SIGN IN</li>
<li id="s-up">SIGN UP</li>
</ul>
</div>
</section>
</body>
</html>
There are a couple of changes you'll want to make.
Add display: block to your a element, to ensure that the
anchor takes up the full width of the list.
Adjust your margin-top values for your respective IDs so that the
spacing is consistent as the above change causes a dramatic
alteration.
That will get you a stacked navigation, though the borders aren't overlapping so you will see thick borders between each navigation. To address your final concern about having the borders change color on hover:
#your-id a:hover { border-color: #ff0000; }
While not related to your question, a lot of your CSS could be cleaned up to avoid redundancies. If all of the anchors in your list have a padding of 10px for example, it's probably better to do .nav a { padding: 10px; } than to state the padding for each unique ID.
Pls refer the updated css code and this what you expected
.nav {
width: 100%;
float: left;
margin: 0 auto;
text-align: center;
background: #000;
}
.nav li {
display:inline-block;
}
.nav li a {
display: block;
}
By changing the display property of the "a" elements to "block" i.e. "display: block", the anchors will occupy the full width of the list.
E.g.
list element1
list element2
list element3
Then, by using id values, set margin-top property to provide appropriate vertical spacing
Finally, in order to change the border color on hover, use below code
a:hover {
border-color: (color of your choice);
}
I made this bar (nav2) to be scrollable if it's not enough screen space, but it seems to be very weird (also because it's my first time I'm doing such thing as a horizontal scrollable bar), the ul is going somewhere in the top, and doesn't come down, I tried float: left, it works, but the ul is not centered in the middle (that's important!)
body { font-family: 'Clear Sans', Verdana, sans-serif; margin: 0; }
#nav1 {
width: calc(100% / 3);
height: 40px;
line-height: 40px;
background-color: black;
float: left;
}
#nav2 {
width: calc(100% / 3);
height: 40px;
background-color: red;
float: left;
overflow: scroll;
}
#nav3 {
width: calc(100% / 3);
height: 40px;
background-color: yellow;
float: left;
}
#nav2 ul {
list-style-type: none;
padding: 0;
margin: 0;
display: block;
height: 40px;
float: left;
}
#nav2 ul li {
display: inline;
color: black;
text-decoration: none;
}
#nav2 ul a {
padding: 5px 17px;
text-decoration: none;
color: white;
}
#keyframes sin {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
#yvelogo {
margin-left: 17px;
padding: 0;
height: 20px;
display: inline-block;
vertical-align: middle;
line-height: normal;
}
a #yvelogo {
border: 0;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>yvemiro</title>
<meta name="author" content="hate">
<meta name="description" content="description for gogel">
<meta name="keywords" content="yve,miro,blog">
<link rel="stylesheet" href="http://static.tumblr.com/zicio7x/hgpnuuz05/fonts.css" type="text/css">
</head>
<body>
<div id="navbar">
<div id="nav1"><img id="yvelogo" alt="eeh, is it IE or what" src="http://static.tumblr.com/zicio7x/VTfnvi4e4/yvelogowhite.svg"></div>
<div id="nav2">
<ul>
<li>Blog</li><li>Stuff</li><li>Me</li><li>Ask</li><li>Archive</li>
</ul>
</div>
<div id="nav3"></div>
</div>
</body>
</html>
'float: left;' will align your divs (nav1, nav2, nav3) side-by-side inside 'navbar', unless you want them side by side.
'navbar' does not have a top margin. Therefore, it aligns itself all the way on top. If you want the navbar to go down a bit, you will need to create a class or div inside your .css file, and give it a top margin.
I have changed your 'nav2' css values as follows:
#nav2 ul {
width: calc(100% / 3);
height: 80px; /* changed 40px to 80px */
background-color: red;
float: left;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap; /* added nowrap */
}
If you double the number of your unordered list items, you will see what I mean.
Is this what you wanted to do?
$(document).ready(
function() {
$("#nav2").niceScroll();
}
);
body { font-family: 'Clear Sans', Verdana, sans-serif; margin: 0; }
#nav1 {
width: 33%;
height: 40px;
line-height: 40px;
background-color: black;
float: left;
}
#nav2 {
width: 34%;
height: 40px;
background-color: red;
overflow: hidden;
display: inline-block;
vertical-align: middle;
}
#nav3 {
width: 33%;
height: 40px;
background-color: yellow;
float: right;
}
#nav2 ul {
list-style-type: none;
padding: 0;
margin: 0;
display: block;
}
#nav2 ul li {
display: inline;
color: black;
text-decoration: none;
}
#nav2 ul a {
padding: 5px 17px;
text-decoration: none;
color: white;
}
#keyframes sin {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
#yvelogo {
margin-left: 17px;
padding: 0;
height: 20px;
display: inline-block;
vertical-align: middle;
line-height: normal;
}
a #yvelogo {
border: 0;
}
#media (max-width:990px) {
#nav2 {
overflow-y: hidden;
overflow-x: scroll;
}
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>yvemiro</title>
<meta name="author" content="hate">
<meta name="description" content="description for gogel">
<meta name="keywords" content="yve,miro,blog">
<link rel="stylesheet" href="http://static.tumblr.com/zicio7x/hgpnuuz05/fonts.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js">
</script>
</head>
<body>
<div id="navbar">
<div id="nav1"><img id="yvelogo" alt="eeh, is it IE or what" src="http://static.tumblr.com/zicio7x/VTfnvi4e4/yvelogowhite.svg"></div>
<div id="nav2">
<ul>
<li>Blog</li><li>Stuff</li><li>Me</li><li>Ask</li><li>Archive</li>
</ul>
</div>
<div id="nav3"></div>
</div>
</body>
</html>
This should fix it up a bit. If you NEED vertical centering, I can revise it once more.
Edit:
Added custom scrollbar plugin and jquery. More information about editing the scrollbar itself can be found at the plugin's official website Here
#header {
z-index: 1;
width: 100%;
padding: 8px 0px 8px 0px;
background-image: url('img/head-img.png');
background-repeat: repeat;
}
#nav {
z-index: 1;
margin: 0px auto;
text-align: center;
font-size: 25px;
}
#nav a {
color: white;
text-decoration: none;
padding-right: 10px;
font-family: fantasy;
}
#nav a:hover {
color: black;
text-decoration: underline overline;
}
#dlogo {
position: absolute;
/* background-color: #feffe3; */
z-index: -1;
width: 100%;
height: 100%;
}
#dtext {
position: absolute;
z-index: -1;
margin: 0px auto;
width: 100%;
height: 100%;
}
#blogo {
display: block;
margin-top: 12%;
margin-left: auto;
margin-right: auto;
}
#btext {
margin-top: 55px;
margin-left: 40%;
}
#wrapper {
}
#content {
margin: 0px auto;
margin-top: 60px;
min-width: 600px;
max-width: 1000px;
font-size: 22px;
font-family: sans-serif;
}
#content h1, h2 {
color: orange;
font-family: serif;
}
#content a {
color: black;
text-decoration: none;
}
#content a:hover {
color: red;
}
#footer {
z-index: 1;
width: 100%;
height: 200px;
background-color: #1d726d;
margin-top: 40%;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title></title>
</head>
<body>
<div id="dlogo">
<img id="blogo" src="img/back-img2.png" />
</div>
<div id="dtext">
<img id="btext" src="img/f-it2.png" />
</div>
<div id="header">
<div id="nav">
Home
About Us
Solutions
Success Stories
Contracts
Careers
Contact Us
</div>
</div>
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
If you look closely you will see that the black nav bar / header will not stretch all the way from side to side.
It seems like a 10px margin has been applied to the whole website.
How do I get rid of the "margin" that I never applied, but does not happen to any other website.
I am using netbeans, chrome, and xampp.
You should use a reset stylesheet to reset the default rules that browsers add to webpages. Eric Meyer's and YUI's reset stylesheets are good for most webpages. Personally, I use Eric Meyer's for my webpages. Make sure to place the reset stylesheet before any other stylesheets.
Can't you just do this?
html {
padding:0px;
margin:0px;
}
Or am I missing the point here? Not very many details were given, if you could elaborate? It helps. :D
Also, giving your div a negative margin value is what I do sometimes.