How do I make a sticky CTA under navbar, that closes when clicked in the CTA-button or the X. This could be used to run a campaign on your website, or make users aware any sales going on.
This is what I am looking for: https://imgur.com/a/jLF0s
#navbar {
overflow: hidden;
background-color: #333;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.sticky {
position: fixed;
top: 0;
width: 100%
}
<div class="sticky" id="navbar">
Home
<a href="#" >News</a>
Contact
</div>
One approach using flexbox.
Wrap the menu and CTA in separate containers within the #navbar. Then apply flexbox properties to both. I've removed float from the a elements in this example.
.menu,
.cta {
display: flex;
}
#navbar a {
display: inline-block;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.sticky {
position: fixed;
top: 0;
width: 100%
}
.menu {
background-color: #333;
}
.cta {
justify-content: center;
align-items: center;
background: red;
}
.cta button {
margin-left: 1em;
background: yellow;
border: none;
padding: .5em;
}
<div class="sticky" id="navbar">
<div class="menu">
Home
News
Contact
</div>
<div class="cta">
<p>Limited...</p>
<button>Buy</button>
</div>
</div>
Related
I have been hours trying to align this absurd code. How can I align the menu to the right?
var k = 0;
function fnclick() {
document.documentElement.style.setProperty("--display", k ? "none" : "block");
k = 1 - k;
}
:root {
--display: none;
--width: 30%;
--height: 5%;
--bgcolor1: #222222;
--bgcolor2: #222299;
--bgcolor3: #2222FF;
font-family: Arial;
font-size: 14px;
}
a:hover,
a#mnu:hover {
background-color: var(--bgcolor2);
}
a:active,
a#mnu:active {
background-color: var(--bgcolor3);
}
body {}
a {
display: var(--display, block);
display: block;
width: var(--width);
height: var(--height);
padding: 5px;
background-color: var(--bgcolor1);
text-decoration: none;
text-align: center;
color: #FFFFFF;
}
div#navbar {
border: 1px solid #ff1100;
display: flex;
top: 0px;
right: 0px;
position: fixed;
margin-top: 10px;
margin-right: 10px;
justify-content: center;
align-items: center;
}
a#mnu {
display: block;
width: 10%;
height: var(--height);
padding: 2px;
background-color: var(--bgcolor1);
color: #FFFFFF;
border: 0px;
}
<div id="navbar">
<a id="mnu" onclick="fnclick()">☰</a>
<a id="mnuExit" onclick="mnuRefr()">Exit</a>
<a id="mnuRefr" onclick="mnuRefr()">Refresh</a>
<a id="mnuOpts" onclick="mnuOpts()">Chart Options</a>
<a id="mnuSlct" onclick="mnuSlct()">Select Channels</a>
<a id="mnuSave" onclick="mnuSave()">Save Snapshot</a>
<a id="mnuHalt" onclick="mnuHalt()">Halt Plot</a>
</div>
<div>This absurd text keeps moving with every action of the menu, and do not keep QUIET, since the menu do not float freely over the text....</div>
Let's say I have an element with class alignRight
<div class="alignRight"> My Menu Item </div>
Now write some css for the above element
div.alignRight{
display: flex;
top: 0px;
right: 0px;
position: fixed;
margin-top: 10px;
margin-right: 10px;
justify-content: center;
align-items: center;
}
Here are 3 important lines
top: 0px;
right: 0px;
position: fixed;
So far, I've been able to get everything else to work so far in regards to the responsive navigation bar on my website, which is a streamlined single page. While every other component is functional, the main issue is on the mobile version, where the navigation bar doesn't close when an anchor link is clicked. It ends up covering content and creates a bad experience for the user. How would this be fixed in the code? The code is below:
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label>
<a href="index.html">
<img src="logo.png" alt="Logo" class="logo"/>
</a>
</label>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Features</li>
<li>About</li>
<li>Login</li>
</ul>
</nav>
/* NAVBAR */
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: 'Nunito', sans-serif;
}
nav{
background: white;
height: 80px;
width: 100%;
}
.logo {
margin-left: 25px;
width: 80px;
height: 80px;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: black;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,a:hover{
background: #B9ECFF;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: black;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
#media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: white;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #25C0F8;
}
#check:checked ~ ul{
left: 0;
}
}
I am guessing the situation is:
you click on navbar -> navbar opens -> click on a nav menu -> navbar doesn't close while loading other page/ going #point
Here is the solution for that situation:
you click on navbar -> navbar opens -> click on a nav menu -> (perform another click on navbar)
cause, clicking navbar opens and closes the navbar..right?
follow these steps:
1.put a id on nav that show and hide nav menus
suppose that is "mainnavbar"
<nav id="mainnavbar">
2.add onclick attribute to every anchor tag and hidenavvar() as its value:
<a onclick="hidenavbar()">
3.declare hidenavbar() function in js:
<script>
function hidenavbar()
{
document.getElementById('mainnavbar').click();
}
</script>
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>
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/
I am currently creating a website that is vertically scroll-able and has a navbar on the top as shown in the image. The navbar gets bigger when the user is not on the very top and this is implemented as:
if (window.scrollY == nav.offsetTop) {
document.querySelector('.nav').classList.add("largerNavbar");
} else {
document.querySelector('.nav').classList.remove("largerNavbar");
}
In javascript, so, it just adds a new class that has larger height to the navbar. But the problem is, it hides the content of the 2nd row. The 2nd row's style looks like:
div#firstRow {
padding: 10px;
width: 100%;
//position: relative;
margin:0 auto;
line-height: 1.4em;
background-color: green;
}
I commented out the position: relative because then the 2nd row will hide the navbar.
What is the problem here?
EDIT:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
height: 100%;
font: 100% $font-stack;
color: $primary-color;
margin: 0px;
.largerNavbar .nav{
font-size: 20px;
height: 90px;
}
.largerNavbar #firstRow {
font-size: 20px;
height: 90px;
}
.onSection {
background-color: gray;
}
.nav{
color: white;
//vertical center
display: flex;
align-items: center;
font-size: 12px;
height: 70px;
overflow: hidden;
background-color: #333;
transition:all 1s;
-webkit-transition:all 1s;
.menus {
position: absolute;
right: 0px;
padding: 10px;
}
.logo {
position: absolute;
left: 0px;
padding: 10px;
}
}
.stationary {
position: fixed;
top: 0;
width: 100%;
}
.nav a {
color: white;
float: left;
display: block;
text-align: center;
padding: 14px;
text-decoration: none;
}
div#firstRow {
padding: 10px;
width: 100%;
//position: relative;
margin:0 auto;
line-height: 1.4em;
background-color: green;
}
div#secondRow {
padding: 10px;
//position: relative;
margin:0 auto;
line-height: 1.4em;
background-color: blue;
}
div#thirdRow {
padding: 10px;
//position: relative;
margin:0 auto;
line-height: 1.4em;
background-color: yellow;
}
div#lastRow {
height: 100px;
background-color: black;
}
}
<div class="logo">
HOME
</div>
<div class="menus">
<span>About</span>
<span>Archive</span>
<span>Projects</span>
<span>Contact</span>
</div>
</div>
<div id="firstRow">
<a id="about" class="smooth"></a>
</div>
<div id="secondRow">
<a id="history"></a>
</div>
<div id="thirdRow">
<a id="contact"></a>
</div>
<div id="fourthRow">
<a id="contact"></a>
</div>
<div id="lastRow">
<a id="footer"></a>
footer goes here
</div>
<script src="bundle.js" type="text/javascript"></script>
I'm guessing that you gave the navbar either absolute or fixed positioning.
If that's the case, I would try adding that largerNavbar class to an element that is a parent to both your navbar and your green container there, and then have some CSS selectors that alter both the navbar's height property and the green container's padding-top property at the same time.
So something like this:
.largerNavbar .nav {
...
height: 120px; // Use the same height for both
}
.largerNavbar #firstRow {
...
padding-top: 120px // Use the same height for both
}
Add some CSS transitions and it should look great. Good luck!