Make Image a DropDown menu

Make Image a DropDown menu - javascript

Does anyone know how I can use an image as a nav bar,
I want to use my logo as a button so that when users click on the logo, a drop down menu appears that fills the entire page.
Currently I have a burger Tab and am implementing the drop down menu like so
<nav class="navbar navbar-inverse">
<div class="container-field">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar right">
<li class="active">Health</li>
<li>Insurance</li>
<li>Track</li>
</ul>
</div>
</div>
</nav>
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color: darkgray;
color: #fff;
padding: 1% 0;
font-size: 1.2em;
border:0;
background-image: i
}
.navbar-brand {
float: right;
min-height: 55px;
padding: 0 15px 5px;
}
.navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active
a:focus, .navbar-inverse .navbar-nav .active a:hover {
color: #fff;
background-color: darkgray;
}
.navbar-inverse .navbar-nav li a {
Color:#D5D5D5;
}

Since you said you're fine with using JavaScript.
Add the following code to your HTML document:
<!DOCTYPE html>
...
<script type="text/javascript" src="thePathToYourJSfile.js"></script>
</body>
</html>
With CSS, style your menu however you wish to, but also add:
display: none;
And your JavaScript could look something like the following:
var logo = document.getElementById('id-of-your-logo')
var menu = document.getElementById('id-of-your-menu')
// this attaches a listener for the click event to your logo element
logo.onclick = function() {
// when your logo is clicked, the code in this function will execute
// the code below checks whether or not the menu is already displaying, and then displays the menu or hides it accordingly
menu.style.display = window.getComputedStyle(menu).display !== "none" ? "none" : "block"
}

Your html had some small errors. It should have been like this
<nav class="navbar navbar-inverse">
<div class="container-field">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar right">
<li class="active">Health</li>
<li>Insurance</li>
<li>Track</li>
</ul>
</div>
</div>
</nav>
If you encounter any trouble just tell us

Related

Changing CSS on navbar depending on scroll

I am creating a site using a Bootstrap 3 navbar and am trying to change the background colour from transparent to solid when the user scrolls to a certain point on the site.
I have written the following the code although had no luck in getting it to work. Thanks in advance.
HTML:
<!-- navigation -->
<nav class="navbar navbar-fixed-top" id="nav">
<div class="container">
<div class="navbar-header">
<!-- Mobile Hamburger -->
<button type="button" class="navbar-toggle" id="nav-icon" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo" href=""><img id="logo" src="assets/img/logo.png" alt="Flock+ Logo"></a>
</div>
<div class="navbar-collapse collapse">
<!-- Navigation Links -->
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>COURSES</li>
<li>PRICING</li>
<li>ACCOUNT</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar { background-color:#101010; border:none; }
#logo { width:45px; height:auto; }
.navbar-right li a { color:#e5e5e5; font-family:headings; font-size:14px; }
ul.navbar-right li a:hover { color:#e5e5e5; text-decoration: none; background-color:transparent; }
ul.navbar-right li a:visited { color:#e5e5e5; text-decoration:none; }
#media only screen and (min-width:768px) {
.navbar { background-color: transparent; border:none; transition:0.8s; }
.nav-scrolled { background-color:#181818; transition:0.8s; }
.navbar-right li a { letter-spacing:3px; }
}
JS:
// Change nav on scroll
$(function() {
var header = $(".navbar");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
header.addClass("nav-scrolled");
} else {
header.removeClass("nav-scrolled");
}
})
});
ALT:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
<script type="text/javascript" src="assets/js/jquery-3.2.1.min.js"></script>

Here's your exact code, minus the media query around the css, to show you that it works. I also added extra height to the nav so you can actually scroll.
If your code isn't working on your computer, you may not be referencing files properly.
// Change nav on scroll
$(function() {
var header = $(".navbar");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
header.addClass("nav-scrolled");
} else {
header.removeClass("nav-scrolled");
}
})
});
.navbar { background-color:#101010; border:none; height: 200vh}
#logo { width:45px; height:auto; }
.navbar-right li a { color:#e5e5e5; font-family:headings; font-size:14px; }
ul.navbar-right li a:hover { color:#e5e5e5; text-decoration: none; background-color:transparent; }
ul.navbar-right li a:visited { color:#e5e5e5; text-decoration:none; }
.navbar { background-color: transparent; border:none; transition:0.8s; }
.nav-scrolled { background-color:#181818; transition:0.8s; }
.navbar-right li a { letter-spacing:3px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- navigation -->
<nav class="navbar navbar-fixed-top" id="nav">
<div class="container">
<div class="navbar-header">
<!-- Mobile Hamburger -->
<button type="button" class="navbar-toggle" id="nav-icon" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo" href=""><img id="logo" src="assets/img/logo.png" alt="Flock+ Logo"></a>
</div>
<div class="navbar-collapse collapse">
<!-- Navigation Links -->
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>COURSES</li>
<li>PRICING</li>
<li>ACCOUNT</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>

Cant see NAVBAR Hamburger ICON, but it works

When I make the window smaller, I can still click on where the hamburger icon should be, and the dropdown drops and it works, but there is NO icon for the hamburger (aka the 3 little lines) any help would be awsome!
<nav class="navbar navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">GroupWrites</a>
</div>
<!--Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Explore</li>
<li>Publish</li>
<li>Library</li>
<li>How It Works</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<% if(!currentUser){ %>
<li>Create Account <i class="fa fa-user-plus"></i></li>
<li>Log In <i class="fa fa-user-circle"></i></li>
<% } else { %>
<li>Signed In As <%= currentUser.username %></li>
<li>Log Out <i></i></li>
<% } %>
</ul>
</div>
</div>
</nav>
CSS
body { font-family: comfortaa; padding-top: 90px; line-height: 1.75 }
.navbar{ background-color: #3c3d41; color: white; padding: 5px; }
.navbar li a:hover,
.navbar li a:active { border-bottom: 2px solid white; background-color: #3c3d41; color: white ; }
.navbar-brand:hover,
.navbar-brand:active { border-bottom: 2px solid white; background-color: #3c3d41; color: white ; }
a { color: white; }
#button { background: rgb(100,149,237); color: white; }
That is my navbar code. It is in my header and everything works perfectly, I just cannot actually see the hamburger icon itself. Any help would be amazing. Please and thank you. Seems like something very easy that I quite cant put my finger on.

So I got it to work , by changing the class from "navbar navbar-fixed-top" to "navbar-inverse navbar-fixed-top" still not sure why this is though. With navbar-inverse my hamburger icon-bars display. So I just customized .navbar-inverse to my same colors and css as I wanted.

How to properly align a brand image in bootstrap

It is not a duplicate of this. That question is about replacing the text logo with image. This question is about placing an image in addition to the text logo.
I have the following bootstrap code that attempts to show the site logo followed by its name. I am using the bootstrap class navbar-brand to do so:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./EnterpriseCopy_files/EnterpriseCopy.html">
<img src="./EnterpriseCopy_files/android-icon-48x48.png">
</a>
<a class="navbar-brand" href="./EnterpriseCopy_files/EnterpriseCopy.html">Enterprise Copy</a>
</div>
<div class="navbar-collapse collapse">
The logo ends up looking like this:
I then have to add style="margin-top:-13px" to the img tag in order to push up the image and make it look good:
This can't be the right way to do this. Is there a better way of doing this?
The original code here, one with the style tweak here.

The problem is with .navbar-brand having padding:
padding: 15px 15px;
It is in bootstrap's default style. So remove that and give:
.navbar-brand {padding: 0;}
You are all set. See the screenshot, where I gave padding: 0; to see it work:

If want to add both an image and text inside the navbar-brand class instead of separating them, apply display: inline-block to your img and then adjust the padding for navbar-brand itself to accommodate everything.
.navbar .navbar-brand {
padding: 2px 15px;
}
.navbar .navbar-brand img {
display: inline-block;
}
See working Snippet.
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
max-width: 280px;
}
/* Carousel */
.carousel-caption {
z-index: 10 !important;
}
.carousel-caption p {
font-size: 20px;
line-height: 1.4;
}
#media (min-width: 768px) {
.carousel-caption {
z-index: 10 !important;
}
}
/**ADDED CSS**/
.navbar .navbar-brand {
padding: 2px 7.5px;
}
.navbar .navbar-brand img {
display: inline-block;
}
/**ADDED CSS**/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./EnterpriseCopy_files/EnterpriseCopy.html">
<img src="http://vbrad.com/misc/EnterpriseCopy_files/android-icon-48x48.png">Enterprise Copy
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Mailbox
</li>
<li>Copy Groups
</li>
<li>Home
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>bar#foo.com
</li>
<li>Sign Out
</li>
</ul>
</div>
</div>
</div>

For me, setting class d-inline-block and align-middle on both anchor elements worked. I'm using bootstrap 4.3.1.

Wrapping text under nav icon css

this is my first post so please be gentle.
I'm trying to create a nav bar using html5 and css and it needs to work with ie8. I have managed to nearly everything i need to done but one thing. i cant make my icons and text to centre align correctly for each navigation button
CSS
.navbar-default .navbar-nav>.active>a:before,
.navbar-nav>li>a:before {
background-repeat: no-repeat;
background-position: 0 top;
content: "";
height: 40px;
width: 40px;
margin-right: 10px;
vertical-align: top;
background-color:transparent;
display:inline-block;
float:none;
}
.navbar-default .navbar-nav>.active>a.home:before,
.navbar-nav>li>a.dashboard:before { background-image: url('/VerificationServices/Static/Icons/dashboard.png');}
.navbar-default .navbar-nav>.active>a.about:before,
.navbar-nav>li>a.uploadscv:before { background-image: url('/VerificationServices/Static/Icons/UploadSCV.png'); }
.navbar-default .navbar-nav>.active>a.contact:before,
.navbar-nav>li>a.uploaddocs:before { background-image: url('/VerificationServices/Static/Icons/UploadDocs.png'); }
.navbar-default .navbar-nav>.active>a.contact:before,
.navbar-nav>li>a.viewrun:before { background-image: url('/VerificationServices/Static/Icons/viewrun.png'); }
.navbar-default .navbar-nav>.active>a.contact:before,
.navbar-nav>li>a.selfver:before { background-image: url('/VerificationServices/Static/Icons/selfver.png'); }
.navbar-default .navbar-nav>.active>a.contact:before,
.navbar-nav>li>a.selfver:hover { background-image: url('/VerificationServices/Static/Icons/dashboard.png'); }
HTML
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Norges Idrettshøgskole</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li>Upload SCV File</li>
<li>Upload documents</li>
<li>View run results</li>
<li>Self verification</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>

here is your updated and working fiddle :
http://jsfiddle.net/553n0udw/1/ Updated Fiddle
i am using glyph-icon, you can use anything you just need to make a class for you custom icon and give it a background url. follow the bootstrap icon rules that will help a lot.

bootstrap navbar toggle button is not visible in mobile

I am using twitter Bootstrap for my website and it has a fixed navbar on top. When I am resizing window in my desktop browser, everything is fine. When I am opening the same site on mobile, I can see navbar-brand but not the toggle button. I'm posting screenshots for a better understanding (first one is desktop firefox and second one is android):
This is driving me crazy!!!
The Code:
.navbar-floating {
background: black;
color: #5b5656;
width: 100%;
border-radius: 0;
}
.navbar-floating .navbar-brand {
color: #810000;
font-size: 20px;
text-transform: uppercase;
}
.navbar-floating .navbar-brand:after {
content: ' | ';
color: #810000;
position: relative;
top: -3px;
}
#floating-nav {
position: fixed;
/* display: none; */
top: 0;
width: 100%;
height: 50px;
}
#floating-nav.navbar {
min-height: 1px;
}
#floating-nav ul li a {
font-size: 20px;
}
#floating-nav ul li a:hover {
background: none;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css">
<nav class="navbar navbar-floating navbar-default" role="navigation" id="floating-nav" >
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#hidden-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand scroll-top" href="#">DSA Media Group</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="hidden-nav">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Agency</li>
<li>Capabilities</li>
<li>Projects</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.js"></script>
What am I doing wrong? Any help is much appreciated.

Just add a navbar-default class to the div wrapping your <ul> element like this:
<div class="collapse navbar-collapse navbar-default" id="hidden-nav">
<ul class="nav navbar-nav">
....
</ul>
</div>

Try using .navbar-dark as
<nav class="navbar navbar-dark navbar-floating navbar-default" role="navigation" id="floating-nav" >
<div class="container">
.........
</div>
</nav>

For me, the solution is really annoying
change navbar-expand-sm to navbar-expand-lg in side <nav class=

It's inside of your bootstrap css. It's defined by default to hidde on md. all you gotta do is creat a new line in your style page..navbar-expand-md .navbar-toggler{display: block !important;}

Develop Reference

JavaScript is the programming language of the Web.

Make Image a DropDown menu - javascript

Related

Changing CSS on navbar depending on scroll

Cant see NAVBAR Hamburger ICON, but it works

How to properly align a brand image in bootstrap

Wrapping text under nav icon css

bootstrap navbar toggle button is not visible in mobile

Categories

Resources