So i was looking at https://youtu.be/8gNrZ4lAnAw?t=8831 to learn how to do repsonsive sites, at step 2:27:11 he creates the navigation by
Edit:
Forgot to mention, it's mobile first, so the below css is for width > 1024, the mobile css is this:
nav ul {
position: fixed;
width: 60%;
top: 0;
right: 0;
text-align: left;
background-color: rgba(36,41,44);
height: 100%;
z-index: 7;
padding-top: 3em;
}
1024 css
nav ul {
/* NOTE position fixed to reset */
position: inherit;
width: auto;
background: none;
display: flex;
padding-top: 0;
}
nav ul li {
float: left;
}
I don't understand why flex on the ul didn't work, that you still need to float the list item? If anyone knows what's going on that would be really helpful.
edit: html
<nav>
<a href="#" class="hide-desktop">
<img src="images/ham.svg" alt="toggle menu" class="menu" id="menu" />
</a>
<ul class="show-desktop hide-mobile">
<li id="exitMenu" class="exit-btn hide-desktop"><img src="images/exit.svg" alt="exit menu"></li>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
Related
There are many similar examples, but none I found to deal with this issue. I'm trying to make <nav> bar with drop-down menu to be sticky. I have a <nav> bar with many menu entries, but I simplified it as much as possible to see where it breaks. There is simple example from w3schools, modified a bit, and it stops working as soon as I add position:sticky (you can see it commented out bellow)
So example code in one file for practicality is:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 28px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
/* position: -webkit-sticky; /* Safari */
/* position: sticky; */ /* If enabled it breaks dropdown menu */
top: 0;
}
li {
float: left;
}
li a, .mDrop {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.mDrop li:nth-of-type(-n+1) { float: down; }
.mDrop {
position: relative;
top: 13.6rem;
}
li .mDrop {
visibility: hidden;
opacity: 0;
width: 8rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1.5rem;
display: none;
}
li a:hover, .mDrop:hover .li:hover {
background-color: green;
}
li:hover > ul,
li:focus-within > ul,
li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li { clear: both; width: 100%; }
.active { background-color: #4CAF50; }
</style>
</head>
<body>
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News
<ul class="mDrop">
<li>Drop1</li>
<li>Drop2</li>
<li>Drop3</li>
</ul>
</li>
<li>Contact</li>
<li style="float:right">Help</li>
</ul>
<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p>Some text to enable scrolling. </p>
<div style="Height:80vh"></div>
<p>Some text to enable scrolling. </p>
</body>
</html>
I've tried many different options examples and no luck. I don't want to encapsulate entire content area in separate <div>, just would like adding stickiness to working drop-down menu. I also would like solution with CSS/HTML only.
Thanks
Your dropdown is broken because you are giving position: sticky to the ul tag. Since you have two nested uls in your code, the style is applied to both of them.
<ul> <!-- first ul -->
<li><a class="active" href="#home">Home</a></li>
<li>News
<ul class="mDrop"> <!-- second ul -->
...
</ul>
</li>
...
...
</ul>
Solution
First of all, wrap your ul (navbar) in a <nav> element. Don't be afraid of "adding another div". This makes you HTML code more semantic and more readable, no need to say it's good for SEO too.
<nav class="navbar">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News
<ul class="mDrop">
<li>Drop1</li>
<li>Drop2</li>
<li>Drop3</li>
</ul>
</li>
<li>Contact</li>
<li style="float:right">Help</li>
</ul>
</nav>
REMOVE these parts from your CSS:
ul {
position: -webkit-sticky; /* remove */
position: sticky; /* remove */
top: 0; /* remove */
}
ADD these to your CSS:
.navbar {
position: sticky;
position: -webkit-sticky;
top: 0;
}
li .mDrop {
visibility: hidden;
opacity: 0;
width: 8rem;
position: absolute;
top: 40px; /* I just added these line. Replace 40px with any value that fits your design */
transition: all 0.5s ease;
margin-top: 1.5rem;
display: none;
}
What I'm basically doing is changing how you "style" your elements. Never use "pure" or "element" selectors like (h1, h2, p, ul) unless you really want to do some general styling; for example, resetting browser default styles.
Full Code
body {
font-size: 28px;
}
.navbar {
position: -webkit-sticky; /* Safari */
position: sticky; /* If enabled it breaks dropdown menu */
top: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a,
.mDrop {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.mDrop li:nth-of-type(-n + 1) {
float: down;
}
.mDrop {
position: relative;
top: 13.6rem;
}
li .mDrop {
visibility: hidden;
opacity: 0;
width: 8rem;
position: absolute;
top: 40px;
transition: all 0.5s ease;
margin-top: 1.5rem;
display: none;
}
li a:hover,
.mDrop:hover .li:hover {
background-color: green;
}
li:hover > ul,
li:focus-within > ul,
li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
.active {
background-color: #4caf50;
}
<body>
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<nav class="navbar">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News
<ul class="mDrop">
<li>Drop1</li>
<li>Drop2</li>
<li>Drop3</li>
</ul>
</li>
<li>Contact</li>
<li style="float:right">Help</li>
</ul>
</nav>
<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p>Some text to enable scrolling. </p>
<div style="Height:80vh"></div>
<p>Some text to enable scrolling. </p>
</body>
I try to make a list menu with a submenu using JSX(React) and css Pure (Not jquery!). My intention is show "box-blue" under the <li> "Technologies" but I don't know how to make the div "box-blue" stay visible when I move out from the <li> "Techonologies" element. (obviously always inside the <div> "box-blue")
<ul className="display-menu">
<li className="display-menu-item"><NavLink className="link-categories" exact to="/">Technologies</NavLink>
<div className="box-blue"></div>
</li>
<li className="display-menu-item"><NavLink className="link-categories" exact to="/">Furniture</NavLink></li>
<li className="display-menu-item"><NavLink className="link-categories" to="/">Entertainment</NavLink></li>
</ul>
CSS code
.display-menu-item{
margin-left: 1rem;
position:relative;
}
.link-categories{
text-decoration: none;
color:white;
font-size: 0.85rem;
width: 40%;
text-align: center;
white-space: nowrap;
width:10rem;
}
.box-blue{
height:25rem;
width: 80rem;
background-color: blue;
position: absolute;
bottom: -25.5rem; /* the box appears under the ul */
z-index: 10;
display: none;
right: -45.5rem; /* the box appears at center */
}
.link-categories:hover ~ .box-blue{
display:block;
}
I am trying to center-align a block of page numbers at the bottom of this page. The HMTL and CSS looks like this:
.pt-cv-pagination-wrapper {
position: relative;
display: block;
text-align: center;
margin: 20px 0;
padding: 0;
}
.pt-cv-pagination {
position: static;
display: inline-block;
text-align: center;
margin: 20px 0;
padding: 0;
}
li {
position: relative;
display: inline;
text-align: center;
margin: 0;
padding: 0;
}
.pt-cv-pagination a {
position: relative;
display: block;
float: left;
padding: 6px 12px;
margin: 1em;
}
<div class="pt-cv-pagination-wrapper">
<ul class="pt-cv-pagination pt-cv-ajax pagination" data-totalpages="3" data-currentpage="1" data-sid="98f4b5c3fg" data-unid="">
<li class="cv-pageitem-prev">
<a title="Go to previous page">‹</a>
</li>
<li class="cv-pageitem-number">
<a title="Go to page 1">1</a>
</li>
<li class="cv-pageitem-number">
<a title="Go to page 2">2</a>
</li>
<li class="cv-pageitem-number active">
<a title="Current page is 3">3</a>
</li>
<li class="cv-pageitem-next active">
<a title="Go to next page">›</a>
</li>
</ul>
<div class="clear pt-cv-clear-pagination"></div>
</div>
If you look on a narrow screen (on the live site), it will be easier to see that the page numbers are very slightly off centre. I've read several articles on here that all make sense but seem to have no further effect on my outcome. It's driving me crazy trying figure out why it's not working. Any help appreciated!
Ah, the art of centering elements in CSS. Good thing we have flexbox to help us all out.
This should do the trick:
.pt-cv-pagination-wrapper .pt-cv-pagination.pagination {
display: flex;
justify-content: center;
}
The centering looks fine. If you want to have a border on the <li> then change the inline of the li in an inline-block.
.pt-cv-pagination li {
position: relative;
display: inline-block;
text-align: center;
margin: 0;
padding: 0;
}
Remove the float from the <a> to have the block on this anchor working the correct way.
.pt-cv-pagination a {
position: relative;
display: block;
padding: 6px 12px;
margin: 1em;
}
I'm learning html and css, and I'm trying to make a header with navigation buttons, but I can't get the layout to work at all. The header image has a border around it that I can't get rid of, and no matter what I do, the list with the links won't layer on top of the image. Can anyone help?
I have the code on codepen (forgive the images, they're temporary): http://codepen.io/anon/pen/NPxYBa
Otherwise, the code I'm using is:
#header {
position: initial;
margin: 0;
padding: 0;
border: 0;
outline: 0;
z-index: 20;
}
#nav {
position: initial;
z-index: 30;
}
li {
top: 50%;
left: 50%;
margin-left: 250px;
display: inline;
}
<body style="background-image:url(http://wallpoper.com/images/00/28/58/17/orange-background_00285817.jpg)">
<div class="header">
<img src="http://p1.pichost.me/640/58/1822357.jpg" width="1920" height="100" />
<div class="nav">
<ul>
<li>home
</li>
<li>portfolio
</li>
<li>resume
</li>
<li>about
</li>
<li>contact
</li>
</ul>
</div>
</div>
there is more than one solution for the menu to be on the image, you can use background-image instead but if you like to leave it like this you can for example set the nav to position: absolute;. for centering the menu you can set it to left: 0;, right: 0;, and margin: 0 auto;
.nav
{
position: absolute;
top: 0;
left: 0;
right: 0;
}
example: http://codepen.io/anon/pen/zxrWmb
I am having difficulty removing the white space to the left of my vertical nav bar.
I have tried setting padding-left to 0 on my main-bar.
It's my first time building a nav bar, so if you see something semantically wrong with my codes, do let me know as well.
Thank you!
This is the HTML code.
<title>Mockup of Zopim</title>
<body>
<main>
<nav class = "side-bar">
<ul class ="main-bar">
<li class="user-nav"><a class ="big-box" href="#">User</a></li>
<li class="main-nav">Home</li>
<li class="main-nav">Visitor List</li>
<li class="main-nav">Visualization</li>
<li class="main-nav">History</li>
<li class="divider-nav">Manage</li>
<li class="manage-nav">Agents</li>
<li class="manage-nav">Departments</li>
<li class="manage-nav">Shortcuts</li>
<li class="manage-nav">Banned Visitors</li>
<li class="manage-nav">Triggers</li>
<li class="divider-nav">Settings</li>
<li class="settings-nav">Widgets</li>
<li class="settings-nav">Personal</li>
<li class="settings-nav">Accounts</li>
</ul>
</nav>
<article>
<header>
<h1>Hello!</h1>
</header>
</article>
</main>
</body>
This is the CSS code.
#charset "utf-8";
/* CSS Document */
body {
background-color: black;
}
main {
width: 100%;
}
.side-bar {
width: 15%;
height: 100%;
background-color: #585858;
position: relative;
float: left;
}
nav li {
list-style: none;
}
.main-bar {
padding-left: 0px;
}
.main-bar li a {
display: block;
width: 100%;
height: 100%;
line-height: 2.5em;
text-decoration: none;
color: white;
text-align: center;
}
article {
width: 60%;
height: 30%;
float: right;
position: relative;
}
a.big-box {
display: block;
line-height: 7em;
}
header h1 {
color: white;
}
Here is the JSfiddle link.
http://jsfiddle.net/codermax/fe0L3d08/
Most Web browsers have different default settings for the base margins and padding. So The best way to solve this is to set all the margin and padding
*{
margin:0;
padding:0;
}
or
html,body {
margin:0;
padding:0;
}
Also better if you reset your css then you can use. something like this:
http://necolas.github.io/normalize.css/
You'll want to use a reset.css to resolve different browser quirks.
I've updated your sample and set body margin, and padding to 0.
body {
margin:0;
padding:0;
}
http://jsfiddle.net/fe0L3d08/1/