I'm trying to copy a Sit the Test website, and got stuck in the border on the current page.
What I wanted is to make a border in Build test so it looks like a current page.
I have this HTML.
* {
text-decoration: none;
}
body {
background-color: #D9E0E6;
}
header {
height: 100px;
background-color: #323b44;
}
.web-logo img {
width: 300px;
height: 60px;
display: block;
float: left;
margin: 20px 0 0 30px;
}
nav {
float: right;
width: 600px;
text-align: right;
margin: 15px 30px 15px 0;
}
nav ul {
display: flex;
justify-content: center;
line-height: 60px;
text-align: center;
}
nav ul li {
flex: 1;
}
nav ul li a {
display: block;
font-family: catamaran, sans-serif;
font-size: 18px;
color: #f2f2f2;
border: 3px solid transparent;
}
nav ul li a.current {
/* I'm trying to make a border here on the current page which is the Build Test*/
border: 3px solid #80dbb8;
border-radius: 10px;
color: #80dbb8;
}
nav ul li a:hover {
border: 3px solid #80dbb8;
border-radius: 7px;
}
```
<header>
<div class="web-logo"><img src="img/logo-bd2b73d4287cc1b0b5d0562cbf409217.png" alt="Site the Test Logo"></div>
<nav id="nav">
<ul>
<li>Build Test</li>
<li>Browse Test</li>
<li>Help</li>
<li>Sign In</li>
</ul>
</nav>
</header>
does anyone can help?
These are for the design only I'm not working yet with the page transition.
Related
I have a status bar that looks like this
but I would like it to look like this
This code I am using for the current one is below. My question is this: would it be easier to do this using a non clickable formatted radio button, which I have seen with a similar look, or to use a totally different approach? I think I can figure out how to change the colors based on what the current status is, but I don't know how to do the basic drawing of the shape.
.container {
width: 800px;
margin: 100px auto;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style-type: none;
width: 16.6666%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: counter(step);
counter-increment: step;
line-height: 30px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
.progressbar li:after {
width: 100%;
height: 2px;
content: "";
position: absolute;
background-color: #7d7d7d;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: #55b776;
}
.progressbar li.active + li:after {
background-color: #55b776;
}
<div class="container">
<ul class="progressbar">
<li class="active">NOI Recieved</li>
<li class="active">Request To Recieved</li>
<li class="active">Recieved to Compelte</li>
<li>Complete To Source</li>
<li>Public Comment</li>
<li>Branch Manager Issues</li>
</ul>
</div>
You could accomplish the basic shapes using a container with a border radius and overflow hidden, and skewed pseudo elements for the segments. Here's a quick proof-of-concept:
ul {
list-style: none;
display: inline-flex;
border: 1px solid black;
border-radius: 600px;
overflow: hidden;
}
li {
padding: 1em 2em;
position: relative;
}
li::before {
content: '';
position: absolute;
inset: 0;
border-right: 1px solid black;
transform: skew(-30deg);
background: bisque;
z-index: -1; /* behind the text */
}
li:first-child {
/* extend the first item leftward to fill the rest of the space */
margin-left: -4rem;
padding-left: 4rem;
}
li:last-child {
/* extend the last item rightward to fill the rest of the space */
margin-right: -2rem;
padding-right: 4rem;
}
.active::before {
background: skyblue;
}
<ul>
<li>One</li>
<li>Two</li>
<li class="active">Three</li>
<li>Four</li>
<li>Five</li>
</ul>
I'm a beginner trying to code a navbar in a practice website but I can't get the final product right.
My navbar is supposed to line up horizontally along the top of the page and then be follow the page as you scroll with a black shadow backdrop. Currently when you load the page, the words line up vertically on the right side, and then condense when you scroll. I also have a logo in the top left that shrinks way too small. Finally, when when you shrink the page, a hamburger icon pops up in the top right that is supposed to show you the menu options, however it no longer works. It's like a cycle with this page, I fix one thing and break another. I am doing this just for fun because I'm trying to learn but now I'm getting frustrated, Thanks!
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
$(document).ready(function() {
$(".menu i").click(function() {
$("nav ul").toggleClass("active")
})
})
#import url('https://fonts.googleapis.com/css?family=Bungee|Bungee+Hairline|Oswald|Raleway&display=swap');
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
box-sizing: border-box;
transition: .5s;
}
nav.black {
background: rgba(0, 0, 0, .8);
height: 80px;
padding: 10px 50px;
}
nav.logo {
float: left;
}
nav .logo img {
height: 80px;
transition: .5s;
}
nav.black .logo img {
padding: 20px;
height: 60px;
}
nav ul {
float: right;
margin: 0;
padding: 0px;
display: flex;
text-shadow: 2px 2px 4px #000000;
}
nav ul li {
List-style: none;
}
nav ul li a {
Line-height: 80px;
color: #fff;
padding: 5px 20px;
font-family: 'Raleway', sans-serif;
text-decoration: none;
text-transform: uppercase;
transition: .5s;
}
nav.black ul li a {
color: #fff;
Line-height: 20px;
}
nav ul li a.active,
nav ul li a:hover {
color: #fff;
background: #008cff;
}
.responsive-bar {
display: none;
}
#media (max-width: 800px) {
.responsive-bar {
display: block;
width: 100%;
height: 60px;
background: #262626;
position: fixed;
top: 0;
Left: 0;
padding: 5px 20px;
box-sizing: border-box;
z-index: 1;
}
.responsive-bar .logo img {
float: left;
height: 50px;
}
.responsive-bar .menu i {
float: right;
color: #fff;
margin: 0;
padding: 0;
Line-height: 50px;
cursor: pointer;
text-transform: uppercase;
}
nav {
padding: 60px;
}
nav.black {
display: none;
background: #262626;
height: 60px;
padding: 0;
}
nav .logo {
display: none;
}
nav ul {
position: absolute;
width: 100%;
top: 60;
Left: 0;
background: #262626;
float: none;
display: none;
}
nav ul.active {
display: block;
}
nav ul li {
width: 100%
}
nav ul li a {
display: block;
padding: 15px;
width: 100%;
height: 60px;
text-align: center;
Line-height: 30px;
color: #fff;
}
}
* {
box-sizing: border-box;
}
.main {
height: 1000px;
padding-left: 20px;
padding-right: 100px;
}
<div class="responsive-bar">
<div class="logo">
<img src="img/logo.png">
</div>
<div class="menu">
<i class="fa fa-bars"></i>
</div>
</div>
<nav>
<div class="logo">
<img src="img/logo.png">
</div>
<ul>
<div class="active">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</div>
</ul>
</nav>
<div class="main">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
when I hover around submenu , then when dragging cursor over submenu and hovering over the submenu disappers and only sometimes appear when I select any other nav menu and hover there but it only works sometimes.
Here is my code
html
{ height: 100%;}
*
{ margin: 0;
padding: 0;}
body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #FFF;
color: #555;}
p
{ padding: 0 0 20px 0;
line-height: 1.7em;}
#menubar
{ width: 880px;
height: 46px;}
ul#menu
{ float: right;
margin: 0;}
ul#menu li
{ float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;}
ul#menu li a
{ font: normal 100% 'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;}
ul#menu li.selected a
{ height: 20px;
padding: 6px 35px 5px 28px;}
ul#menu li.selected
{ margin: 1px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;}
ul#menu li.selected a, ul#menu li.selected a:hover
{ background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;}
ul#menu li a:hover
{ color: #E4EC04;}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
display: inline-block;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 35px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
<div id="main">
<div id="menubar">
<ul id="menu" >
<li ><a href="#" >Home</a></li>
<li ><a ref="#" >Contact Us</a></li>
<li >
<div class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
</ul>
</div>
</div>
How can I solve this ..
Ay help is appreciated. I tried but I failed and Have no idea how to solve this.
Thanks in advance.
It's because there is a space between the "Dropdown" menu and the dropdown list. Instead of hard coding the margin in px use a percentage. I also recommend using top instead of margin-top. Replace .dropdown-content css with:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
top: 100%; //To move it up or down more you can use calc like: calc(100% + 1px) or calc(100% - 2px)
}
when you move the mouse from the dropdown menu toggle, into the submenu, you are briefly not hovering over the div due to the margin-top value of the submenu. If you really want that divide between the two add white top border (i.e. border-top: 2px solid white;).
Heres a JSFiddle
Change the CSS as follows:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 30px;
}
Change the HTML as follows:
<li class="dropdown">
<div>
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
The issue is simply a gap between li.dropdown and .dropdown-content. It is worth noting that when you move the cursor quickly from the dropdown button to the dropdown list, it does not disappear. However, doing that slowly vanishes the list.
The simplest solution I could think of here is to decrease the top margin of the dropdown list, while adding a top padding to the first list item to compensate for that lost margin (a top margin won't work here). So, your code for the dropdown menu would look like this:
#menubar {
width: 880px;
height: 46px;
}
ul#menu {
float: right;
margin: 0;
}
ul#menu li {
float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;
}
ul#menu li a {
font: normal 100% 'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;
}
ul#menu li.selected a {
height: 20px;
padding: 6px 35px 5px 28px;
}
ul#menu li.selected {
margin: 1px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;
}
ul#menu li.selected a,
ul#menu li.selected a:hover {
background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;
}
ul#menu li a:hover {
color: #E4EC04;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
display: inline-block;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 30px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:first-child {
padding-top:17px;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
<div id="main">
<div id="menubar">
<ul id="menu">
<li>Home</li>
<li><a ref="#">Contact Us</a></li>
<li>
<div class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
</ul>
</div>
</div>
I implemented the code below, I'm facing an issue on mobile view when clicking the menu button on mobile didn't show the menu but if I didn't scroll down the menu works,
how can i fix this issue on mobile view
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
$("body").toggleClass("hidden");
})
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.centered-logo').height())
{
$('nav').addClass('fixed');
}
else
{
$('nav').removeClass('fixed');
}
});
})
body{height: 3000px;
margin: 0;
padding: 0;
font-family: monospace;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
}
.hidden{
overflow: hidden;
}
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (min-width:768px){
nav{
display: block !important;
}
}
#media (max-width:768px){
nav{
display: none;
padding: 0;
}
.responsive-bar{
top:0;
display: block;
position: fixed;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<nav>
<h1 id="full-logo">hola</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>
I have on mobile view an issue when scroll down and click menu button nothing appear but when I was at the to when click menu will appear the menu item
all I need is when scroll down and up the menu appears
how can I fix this issue
The issue is because you set overflow: hidden to your body, while the nav is part of the page flow. The nav will always be offset relative to it's parent.
Here's an example where overflow: hidden is disabled:
http://jsfiddle.net/u9L50243/ (Toggle the menu and then scroll - You'll notice the navigation scrolls in to, and out of the viewport)
The easiest fix is just to apply position: fixed to your nav bar, in addition to the .responsive-bar.
For example: http://jsfiddle.net/ebcvqds7/
The problem I encounter is that I want the nav to expand when I click on a button, but what it now does is that it looks like it kinda float above the rest. Or that it is another div that is created underneath it.
For a clearer understanding of what is happening I would recommend that you run the snippet, because it is hard for me to explain what really happens.
This problem is only relative for the mobile menu.
I also use the bootstrap css, but that onlt effects <div class="container">.
The things I already tried to fix the problem are:
Removed the bootstrap css
Changed the <nav> to a div element
Changed all the positions to relative
Changed somethings about the float
So this are the most important parts of the code I use.
/*JS for the hide/show of the menu*/
$(document).ready(function() {
$(".menu-trigger").click(function() {
$(".menu").slideToggle(400, function() {
$(this).toggleClass("nav-expanded").css('display', '');
});
});
});
/*JS for the dropdown in the menu*/
$(document).ready(function () {
$("li").click(function () {
$('li > ul').not($(this).children("ul").slideToggle()).hide();
});
});
body{
background-color: white;
}
.container{
background-color: #919191;
box-shadow: 0px 0px 2px black;
}
nav {
background: #7D7D7D;
border-radius: 4px;
box-shadow: 0px 0px 2px #303030;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
height: 40px;
margin: 2px 10px;
}
nav ul, li, a {
margin: 0;
padding: 0;
}
nav a, a:link, a:visited, a:hover{
text-decoration: none;
color: white;
display: block;
}
ul > li {
list-style: none;
float: left;
}
ul > li a {
color: #fff;
font-weight: bold;
line-height: 40px;
height:40px;
display:block;
padding:0px 10px;
}
nav ul li a:hover{
border-radius: 4px;
background: #666666;
display: block;
}
nav ul li ul {
background: #333333;
border-radius: 4px;
box-shadow: 0px 0px 2px #303030;
display: none;
position: absolute;
z-index:100;
}
nav ul li ul li {
float: none;
line-height: 40px;
width: 150px;
}
.menu-trigger{
display: none;
}
.burger{
background-color: white;
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin: 5px auto;
}
#media screen and (max-width: 760px){
.menu-trigger{
display: block;
background-color: #BFBFBF;
border-radius: 4px;
box-shadow: 0px 0px 2px #303030;
height: 35px;
padding: 5px 5px;
margin: 3px 10px;
width: 40px;
}
.nav-expanded{
display: block;
}
nav ul{
display: none;
background: #7D7D7D;
border-radius: 0 0 4px 4px;
}
nav ul li{
float: none;
padding: 0;
}
nav ul li:first-child{
margin-top: 5px;
}
nav ul li ul {
background: #7D7D7D;
box-shadow: none;
display: none;
position: relative;
z-index:0;
}
nav ul li ul li {
line-height: 35px;
width: 100%;
}
}
.active{
border-radius: 4px;
background-color: #404040;
}
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<title></title>
</head>
<body>
<div class="container">
<header>
<nav>
<button class="menu-trigger">
<span class="burger"></span>
<span class="burger"></span>
<span class="burger"></span>
</button>
<ul class="menu">
<li class="active">Link
</li>
<li>Link 2
</li>
<li class="dropdown-trigger">Dropdown<span class="caret"></span>
<ul>
<li>Link</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Link 3
</ul>
</nav>
</header>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>
Thanks in advance for your help.
And if there are somethings unclear please ask and maybe I can make a clearer. Also if there is something wrong with the post I would like to hear it.
Check the DEMO here
You had a fixed height for "nav" that was 40px with border radius 4px, which was making it not to expand and look like a separate element in itself even though the expanded list was inside it.
What you need to do is to give it an auto height, so that it has the height equal to the height of all the child elements together.
Check the demo, let me know if you wanted this only.