Good afternoon! I'm currently working on a navbar but the menu that pops up on from clicking on the hamburger icon (which shows all the links/navigation-items as a smaller screen widths) is a little too gaudy/not really good on a presentation level. How can I customize that dropdown menu to look better? HTML code is below:
<nav id="navigation" class="navbar navbar-expand-sm">
Brand
<button id="hamburger-icon" class="navbar-toggler" data-toggle="collapse" data-target="#collap-menu">
<span class="navbar-toggler-icon"><img src="D:\code\yannijewelry\images\evileyepng.png"></span>
</button>
<div id="collap-menu" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li><a class="nav-link" href="#">Etsy</a></li>
<li><a class="nav-link" href="#">Facebook</a></li>
<li><a class="nav-link" href="#">Instagram</a></li>
</ul>
</div>
</nav>
What element do I target, or rather, how can I customize a better dropdown menu? I noticed the hamburger icon, when clicked, also pushes the navbar elements up when it shows
Its hard to know exactly how to advise you on styling since we can't see exactly what styles you're currently viewing with just the HTML. Utilizing the core Bootstrap CSS, I can approximate your view and advise accordingly.
Let's say you want to change the background and text color of each of your menu items:
#collap-menu li{
background: #666;
padding-left: 20px;
}
#collap-menu li a{
color: #fff;
}
This would set your menu items to a gray background with white text with a little additional spacing for the text. You can replace the colors here with the branding colors of your website. Any changes beyond changing the text and color would need to be specifically outlined in your request.
Related
I want to deepen my knowledge about accessibility. So I appreciate any feedback. Please check this code whether it fulfills (hopefully high) standards of accessibility for a responsive menu. I think that there may be some issues with keyboard navigation – but I don’t know.
First the HTML. Pls. notice the comments inside the HTML:
For convenience I list them here too:
Wrap navigation in nav tag. Don't use <div class="navigation">
Give navigation a role="navigation"
Don't wrap button in a tag or div. Instead use button
Give screenreader a hint, whether menu is expanded or hidden with area-expanded="Boolean". Add hint dynamically with JS.
So the complete HTML is:
<header class="header">
<!-- role=navigation to ensure better support, since not all browsers/screen readers will recognize the <nav> element. -->
<nav role="navigation" class="navbar">
companyLogo
<ul class="nav-menu">
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">nav</a></li>
</ul>
<!-- By using aria-expanded attribute, the user will be able to know that the button content is expanded or collapsed. At first, we will add the attribute by default and then JavaScript will help changing the value.
https://www.a11ymatters.com/pattern/mobile-nav/ -->
<button class="hamburger" aria-expanded="false">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
</nav>
</header>
I reduce the CSS part to this:
.hamburger {
display: none;
}
Is it appropriate to hide the .hamburger in the DOM? (I also gave it an area-expanded – does it make sense?)
The JS: Here I am primarily interested whether the if statement changing the area-expanded dynamically works as intended.
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", openMenu);
function openMenu() {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
// Not sure whether, this is correct
if (navMenu.classList.contains("active")) {
hamburger.setAttribute("aria-expanded", "true");
} else {
hamburger.setAttribute("aria-expanded", "false");
}
}
It would be great, if:
you could provide feedback, which makes this menu more accessible.
you could give me an idea how to optimize the keyboard input.
you comment whether it is approppriate to hide the the hamburger with display: none
you could tell me whether the JS which dynamically changes the Boolean in area-expanded is correct.
Thank you for your time.
I would like to disable the nav-pill hover effect on just one item, the link that changes the language of the page, in my navbar. What is the best way to achieve this using either a bootstrap class or CSS?
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav nav-pills navbar-right">
<li class="language language-active disabled">NL</li>
<li class="language language-nonactive language-right">EN</li>
<li class="approach-li">Diensten</li>
<li class="about-li">Over ons</li>
<li class="qa-li">Vragen</li>
<li class="about-li">Contact</li>
<li class="navbarpadding">
<form action="afspraak.html">
<button class="btn navbar-btn btn-primary2">Afspraak maken</button>
</form>
</li>
</ul>
</div>
Looking at your html using the class: ".language-nonactive"
You can these styles to go along with it, this will remove the hover of the grey background:
.nav>li.language-nonactive>a:hover, .nav>li.language-nonactive>a:focus {
background-color: transparent;
}
Here is a jsfiddle to show what I've done:
http://jsfiddle.net/ho1sgm1e/
Additionally you could you something like this with jquery:
$(document).ready(function() {
/*disable non active tabs*/
$('.nav li').not('.active').addClass('disabled');
/*to actually disable clicking the bootstrap tab, as noticed in comments by user3067524*/
$('.nav li').not('.active').find('a').removeAttr("data-toggle");
});
source: Bootstrap tabs pills disabling and with jQuery
Furthermore, utilising the disbaled class will effectively disable the button.
Using CSS:
.nav .language-nonactive a:hover {
background:rgba(0,0,0,0);
}
Demo
I'm experimenting with Bootstrap 3.2. I'm trying to create a fixed at top navigation bar but I'm running into two problems:
The navigation bar overlaps the content below it.
The navigation bar seems to be going far off the screen to the right. This makes my button in the navigation bar not visible unless the window width is dragged to a smaller size.
For the first problem, I've followed the Bootstrap example tip by adding a class to my css file, including this file below the Bootstrap css file in the html document, and then referring to the class.
.navbar-height{
body{padding-top: 200px;}
}
<body class="navbar-height">
Though, this seems to do nothing (as you can see I specified the number really high hoping to see a dramatic change, which did not occur).
Here's my the navigation bar:
<header id="header-navigation">
<div id="nav-bar-container">
<nav id="nav-bar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div id="nav-item-container" class="container-fluid">
<div id="drop-down" class="navbar-header">
<button type="button" class="btn btn-default navbar-btn navbar-toggle collapsed" data-toggle="collapse" data-target="#user-dropdown">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="home-button" class="navbar-left">
<a class="navbar-brand" href="#"><img alt="Brand" src=""></img></a>
</div>
</div>
<div id="user-dropdown" class="navbar-collapse collapse">
<ul class="dropdown-menu" id="dropdown-items" role="menu">
<li>
<div class="list-group-item">
<div class="row-picture">
<img class="circle" src="" alt="icon"></img>
</div>
<div class="row-content">
<h4 class="list-group-item-heading">Placeholder</h4>
<p class="list-group-item-text">Placeholder</p>
</div>
<div class="list-group-seperator"></div>
</div>
</li>
<li><span class="glyphicon glyphicon-log-out"></span></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
As a quick break down of the above code, I have a <header> tag which will hold the navigation bar. Within this <header>, I have a containing <div> (id="nav-bar-container") which only purpose is to act as a container for the navigation bar (maybe I'll add something else to the header and want to keep the bar seperate). Then, I have the actual <nav> which has the appropriate classes (or so I think): "navbar navbar-default navbar-fixed-top". The next <div> (id="nav-item-container") holds the components of the navigation bar. The following <div> (id="drop-down") contains the button (which seems to disappear at full-screen) and a link with a "brand", which always seems to be visible. The last major <div> contains the "drop down" content for when the button is pressed.
My Question: why is my navigation bar overlapping the content below it and over extending to the right hiding the button?
Ok, first thing, you don't need the <header> tag, so feel free to remove that.
Second, from the Docs on navbar-fixed-top, you need to have padding:
body { padding-top: 70px; }
Notice you applied it to the heading style; that won't work. Apply it to the body and it works fine.
As far as the 2nd issue, I don't actually see any horizontal scrolling when I removed the
<header> tag, so I think that may have been causing an issue.
Checkout this Bootply example:
Bootply Example
To see what I mean. It's your code with the tag removed. Hope that helps!
Change..
.navbar-height{
body{padding-top: 200px;}
}
to..
body.navbar-height{
padding-top: 200px;
}
You want the padding on the body itself. This will push you body down 200px giving you a gutter at the top for your fixed navbar.
most likely you'd want to adjust this padding depending on the actual height of your navbar.
As for problem number two, where I believed the navigation bar to be overflowing off the screen to the right, was just a mistake in the layout of the code. I was grouping the button I wanted to display on the right with the brand in the "navbar-header". What this does is display the brand but use that button only on a mobile screen to hide or show its associated dropdown. That is why I was only seeing the button when I made the width smaller by dragging the window. To fix this problem I removed the button and placed it within the appropriate code block. So, my "navbar-header" now looks like this:
<div id="drop-down" class="navbar-header">
<div id="home-button" class="navbar-left">
<a class="navbar-brand" href="#"><img alt="Brand" src=""></img></a>
</div>
</div>
Now, next within the id="nav-item-container" parent div, I create a list of items (ul). This list contains the items within the navigation bar and has the classes "nav navbar-nav navbar-right". Each list item (li) within this list is an item within the navigation bar. Dropdown buttons and their contents must be contained within the same list item (li). Make sure the parenting list item to the dropdown elements contains the class "dropdown". Then, the button or link should have the "dropdown-toggle" class applied to it. And the dropdown items themselves (which too can be a list of items and often is) should have the class "dropdown-menu". For example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-align-justify"></span>
</a>
<ul class="dropdown-menu" id="dropdown-items" role="menu">
<li>
<div class="list-group-item">
<div class="row-picture">
<img class="circle" src="" alt="icon"></img>
</div>
<div class="row-content">
<h4 class="list-group-item-heading">Placeholder</h4>
<p class="list-group-item-text">Placeholder</p>
</div>
<div class="list-group-seperator"></div>
</div>
</li>
<li><span class="glyphicon glyphicon-log-out"></span></li>
</ul>
</li>
</ul>
Note, in the snippet I didn't include the parenting nav, div, or header so it may not work exactly how it should. Also, I figured the majority of this out on my own by referencing the Bootstrap component page, as well as, the Bootstrap material design page (a plugin to Bootstrap that gives everything the Google Material Design look and feel). So, I'm not sure if all the "rules" I stated are mandatory or if there are other ways to achieve this.
As for problem number one, I just made a silly mistake with the css and the two other answers provided correct ways of fixing it. All I had to do was fix the body css like so:
body{
padding-top: 200px;
}
I am using bootstrap 3 on a Rails 4 app.
I have a "normal" fixed navbar on the page headers. For the moment, when the viewport decreases (small device), all menu titles disappear and go into the "three bars" icon like here: http://getbootstrap.com/examples/navbar-fixed-top/ (try on a small screen/viewport).
Is it possible with bootstrap 3 to NOT make all menu titles go into this three bar icon, but to replace all texts by very small icons (for example Help would be replaced by a " ? "icon) so that there is enough space for all of them, when the viewport is very small.
Is there something already built-in inside Bootstrap allowing to do that ? or maybe some external libraries that play well with BS3?
thanks
That should not be to hard, and no need for a framework. You can use the responsive utility classes provided by BS3. With those, you can hide the icons on big screen and show the labels, and the opposite when on small screen. Your navbar markup would look something like this:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">
<i class='glyphicon glyphicon-user visible-xs-inline-block'></i>
<span class='hidden-xs'>Link</span>
</a></li>
<li><a href="#">
<i class='glyphicon glyphicon-user visible-xs-inline-block'></i>
<span class='hidden-xs'>Link</span>
</a></li>
</ul>
</div>
</nav>
And a small line of css is required to prevent the li from being displayed as block on small screens. Something like this should do the trick:
.nav>li {
display: inline-block;
}
And an example to demonstrate: http://www.bootply.com/a17IsJ0Pop
I can't find what i should modify in bootstrap to change the mouse-over background color of elements in a navbar. This is the element i want to change:
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
#Html.ActionLink("Distribusjonsenhetsadministrasjon", "Dea", "Home")
</li>
</ul>
</div>
I managed to change the normal background color and text color without any problem. But not the mouse-over background color, i tried to change every possible hover connected to a nav class i could find in the css.
try this
.navbar-nav>li:hover{
color: #333;
background-color:red;
}