This has been asked a million times. I have tried every single solution I found here, but none of them worked for me.
I have this navbar:
<div>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark hidden-sm" id="navbar">
<ul class="navbar-nav" id="navToHide">
<li class="nav-item active">
<a class="nav-link" href="#quemsou" id="link1">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="link">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="link">Link</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="" href="#" id="burguerDrop"><i class="fa fa-bars" style="font-size:40px; color:white;"></i></a>
</li>
</ul>
</nav>
</div>
And this jQuery/JS:
$(document).ready(function() {
if (document.documentElement.clientWidth > 480) {
$("#navbar").addClass("fixed-top");
$("#burguerDrop").hide();
} else {
$("#navbar").removeClass("fixed-top");
$("#navToHide").hide();
$("#burguerDrop").show();
}
});
I can't hide my nav on mobile no matter what. I can't hide the nav or the nav-links. But I can hide and show my 'burguerDrop'. My 'buguerDrop' is working fine, though it's not displaying on my computer web browser. However, it is displaying on mobile exactly how I wanted.
But in the other elements, I can't do the same. I have no idea why. I have tried using both "css('display', 'none');" AND "hide();". None of them works to hide my navbar, but both of them works to display my burguerDrop.
I have absolutely no idea why this is happening.
Note: As per the other answers and comments this can be done more cleanly with either CSS styling or using built in Bootstrap classes.
To answer your original question: The main thing you were missing is showing and hiding elements in the right places.
I've re-factored your code so you can make use of the window.resize event:
function setupMobile() {
if (document.documentElement.clientWidth > 480) {
$("#navbar").addClass("fixed-top");
$("#burguerDrop").hide();
$("#navToHide").show();
} else {
$("#navbar").removeClass("fixed-top");
$("#navToHide").hide();
$("#burguerDrop").show();
}
}
$(document).ready(setupMobile);
window.addEventListener('resize', setupMobile);
And here is a demo on Codepen to show this solution in action.
Since you already using bootstrap, why dont you simply use css breakpoints.
.navToHide {
display: none;
}
#include media-breakpoint-up(sm) {
.navToHide {
display: block;
}
}
There is a purely CSS way of doing this. Position sticky basically allows an element to scroll in its parent element. If you want to hide the burger icon you can just do a display: none on a media query like below.
#navbar {
position: sticky;
top: 0;
left: 0;
width: 100%;
}
#media screen and (min-width: 480px) {
#burguerDrop {
display: none;
}
}
Here's the codepen for this:
https://codepen.io/jeffteachestheweb/pen/YzZEqRq
Related
I am trying to create an onload event where a function compares the current URL to an href and displays content according to the href that is shown. I want to accomplish this by selecting a child from a parent, though I am unsure as to how to get the contents within the href specifically. Here is a bit of the code I have written:
html
<ul id="main-nav">
<li class="nav active">Shipping</li>
<li class="nav">returns</li>
<li class="nav">Custom Orders</li>
<li class="nav">Replacements/ Warranty</li>
<li class="nav">Most Frequently Asked Questions</li>
<li class="nav">RAD Principles</li>
<li class="nav">Environmental Stewardship</li>
<li class="nav">MADE in the USA</li>
</ul>
js
var href = $("#main-nav").children('a');
$("div.faq-container").hide();
if (window.location.href.includes(href)) {
$("div.faq-container").eq("0").show();
} else (window.location.href.includes(href)) {
$("div.faq-container").eq("1").show();
}
the main issue I have is that I want to write the line that has
var href = $("#main-nav").children('a');
so that it grabs the contents within the href alone, and nothing else outside of that, so that it would have either "#shipping", "#returns", etc. as its value.
You took the problem by the wrong end. What you need to know is the location.hash to target the right div to display.
This should be closer:
var hash = window.location.hash
// Hide all .faq-container
$("div.faq-container").hide()
// If there is a hash
if(hash){
$("#"+hash).show()
}
Here's a vanilla JavaScript example which will make the selected section visible.
It uses the hashchange event to detect when the hash has changed.
const sections = [...document.querySelectorAll('.section')];
function showSelected () {
sections.forEach(section => section.classList.remove('show'));
if(location.hash.length) {
const section = document.querySelector(location.hash);
if (section) {
section.classList.add('show');
}
}
}
window.addEventListener('hashchange', showSelected);
.section {
margin: 0.5rem;
padding: 0.5rem;
background-color: #e0e0e0;
width: 10rem;
display: none;
}
.show {
display: block;
}
<ul id="main-nav">
<li class="nav active">Shipping</li>
<li class="nav">returns</li>
<li class="nav">Custom Orders</li>
<li class="nav">Replacements/ Warranty</li>
<li class="nav">Most Frequently Asked Questions</li>
<li class="nav">RAD Principles</li>
<li class="nav">Environmental Stewardship</li>
<li class="nav">MADE in the USA</li>
</ul>
<div id="shipping" class="section">#shipping</div>
<div id="returns" class="section">#returns</div>
<div id="custom" class="section">#custom</div>
<div id="replacements" class="section">#replacements</div>
<div id="mostFAQs" class="section">#mostFAQs</div>
<div id="RAD" class="section">#RAD</div>
<div id="environmental" class="section">#environmental</div>
<div id="USA" class="section">#USA</div>
I'm new to web programming, and I'm having an annoying problem with HTML images alignment... I can't understand why images are always shifted down compared to text lying in the same line, regardless of its CSS settings!
<li class="navbar-item"><a class="nav-link" href="../contact/contact.php" >CONTACT</a></li>
<li class="navbar-item"><a class="nav-link" href="#"><img src="source" style="border-radius:10px;width:35px;height:35px;"></a></li>
This is the basic code I'm running, I've already tried plenty of methods to align "CONTACT" to the image, but no one of them works, giving me the same result:
You can use flexbox to align items very easily. The rule you need that aligns them vertically is "align-items: center;".
ul {
display: flex;
align-items: center;
}
li {
list-style: none;
margin: 0 .5rem;
}
img {
max-width: 100px;
}
<ul>
<li class="navbar-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
<li class="navbar-item">
<a class="nav-link" href="#">
<img src="https://iconarchive.com/download/i47330/icons-land/vista-flags/United-States-Flag-1.ico">
</a>
</li>
</ul>
try
display: inline;
to the image
By default, li displays as list-item. If you change the display property of the element to "inline" it will be displayed next to the text.
Reference: https://www.w3schools.com/cssref/css_default_values.asp
<a class="nav-link" href="#">CONTACT</a>
<a class="nav-link" href="#" style="display:inline"
><img src="source" style="border-radius:10px;width:35px;height:35px"
/></a>
Thanks,
PNS
I've managed to put together some code that will allow my navbar to shrink when the user scrolls, however I also want the nav links to reduce in font-size but I seem to be missing something, nothing happens no matter how I write my code.
Since I don't want to target each link text individually I've tried to set a class and target the class using getElementsByClassName and using style.fontsize. I also tried to create a CSS class and applying it when scrolling.
Here's my js code:
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("navbarTop").style.padding = "10px 0px";
document.getElementById("logo").style.width = "40%";
document.getElementsByClassName("nav-link .topItem").addClass('scrollFontSize');
} else {
document.getElementById("navbarTop").style.padding = "40px 10px";
document.getElementById("logo").style.width = "50%";
}
}
Here's the HTML:
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item ml-auto active">
<a class="nav-link topItem" href="#">HEM<span class="sr-only"> (Aktiv)</span></a>
</li>
<li class="nav-item ml-auto">
<a class="nav-link topItem" href="#">BLOGG</a>
</li>
<li class="nav-item ml-auto">
<a class="nav-link topItem" href="#">RESURSER</a>
</li>
<li class="nav-item ml-auto">
<a class="nav-link topItem" href="#">KONTAKT</a>
</li>
</ul>
</div>
And CSS:
.scrollFontSize {
font-size: 12px;
}
It looks like you are mixing jQuery syntax with pure JavaScript.
Try to replace the line where you set the scrollFontSize class with this:
document.querySelectorAll("a.nav-link, a.topItem").forEach(function(childElement){
childElement.classList.add('scrollFontSize');
});
A better solution will be to use jQuery.
Finally I stumbled over a solution to my problem. There's a Codepen link to a possible solution in the second post in this thread:
https://css-tricks.com/forums/topic/change-font-size-while-scrolling/
Im using Bootstrap 4 and for some reason the scroll to div function is only working on mobile phone/smaller screen sizes.
Javascript code:
<script>
$(".navbar-nav li a").click(function(event) {
if (!$(this).parent().hasClass('dropdown'))
$(".navbar-collapse").collapse('hide');
}); </script>
Navbar link:
<li class="nav-item">
<a class="nav-link" href="#about-us"><button type="button" class="btn btn-green">About</button></a>
</li>
Div:
<div class="about" id="about-us">
<div class="container">
test
</div>
</div>
navbar-brand class is overlapping the navbar-nav.So add z-index to the navbar-nav in your html page i.e
<ul class="navbar-nav ml-auto" style="z-index:1;">
You can add following to your css file:
.navbar-brand.mx-auto {
width: 216px;
right: 0;
left: 0;
}
I've used this code for my navbar :
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
Link
</li>
<li>
Link
</li>
<li class="dropdown">
Dropdown<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
Something Here
</li>
<li>
Something else here
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Link
</li>
</ul>
</div>
</nav>
The above code is for simple navbar example. As I'm new to stackoverflow and have less reputation so I can't add images to my question.
Simple hover I can make using CSS but I wanted to make a hover in which if the cursor goes to any item on the navbar there is a effect like color water is filling in a glass.
Also I'm very curious about how to make the end of the section or div a little slant with some angle.
Please refer to the following link for reference:
This the template for reference
I'm trying to make a navbar and end of a section exacty like this template.
The template you refer to creates the bottom "slant" with the following CSS:
.section {
position: relative;
}
.section:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: -195px; /* the height of your image */
left: 0;
z-index: -1;
height: 195px; /* the height of your image */
background: url(path/to/your/image.png) no-repeat 50% 0%;
}