I'm having a strange behavior with using bootstrap's navbar nav. I have normal text and a label span in one of the navigational elements and the span sometimes ends up in new line thus rendering whole navbar higher than it should be. The strangest thing is that it happens only occasionally (~50% of the time), but without me changing any conditions (same screen size, same page/content, etc.). Also, I was only able to reproduce this in Chrome not in Firefox.
As soon as I use dev-tools to adjust any css settings, the span jumps back in place, so I'm really out of idea how to debug or experiment with fixes.
Any ideas or suggestions on:
how to debug the issuse?
what could be the cause?
Here is how it looks broken:
and how it should be:
And here is excerpt of my header. Unfortunately I have a lot of code in the full header (and it's an angular app some things are controlled dynamically), so I'm not fully excluding the possibility that the problem is somewhere else, but I'm having hard time reproducing it regularly with the full code, so I didn't think making a plunker case would be easy.
<header class="navbar navbar-default navbar-fixed-top ng-scope">
<nav class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="divider-vertical hidden-xs"></li>
<li id="home-button">
Home
</li>
<li id="library">
<a href="/library">Library
<span class="small label label-primary label-super">new</span>
</a>
</li>
</ul>
</nav>
</header>
Related
I have a Bootstrap v5 site I'm trying to make accessible. The navbar has the company logo that links to the home page, but also a nav link "Home" that also links to the home page. WAVE evaluation tool triggers a warning for "Redundant link" since they go the same place and are next to each other.
The code:
<nav class="navbar navbar-expand-lg" aria-label="Main navigation">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/">
<img src="/Images/company_logo.png" alt="Company logo">
</a>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/home/about">About</a></li>
<li class="nav-item"><a class="nav-link" href="/home/contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
The obvious solutions are:
Solution 1: Remove the logo link. But everything I read is that it's a best practice to have your logo be a home page link.
Solution 2: Remove the Home link. But for accessibility I hear you should include a Home link in the navigation.
Solution 3: Somehow combine the logo and Home nav-item into a single link, but not sure how Bootstrap would support that especially in mobile view.
Solution 4: Ignore it, it's a WAVE "Alert" not a "Warning".
I'm leaning towards Solution 1; it seems to be the most accessible.
What would you do?
Solution 1: It's pretty common to have a logo be a link to the home page. It's fine to keep it.
Solution 2: There is nothing in the Web Content Accessibility Guidelines (WCAG) that says you must have a "Home" link in the navigation menu. It's a pretty common thing to have but is not required. You could remove it if you wanted to but don't do it for any accessibility reasons. Remove it if it doesn't fit with your design, otherwise keep it.
Solution 3: Often there are elements between the company logo and the first menu item with the "Home" link (such as a login link or search button) so combining the links could be very messy. There's no need to pursue this route.
Solution 4: Absolutely, except it's a Warning, not an Alert. You had it backwards. WAVE is just being proactive and pointing out usability issues that could affect some users but it's not an accessibility (WCAG) failure. It's fine to ignore this Warning if you're happy with your design.
I managed to code for a header and a navigation bar however I don't know how to set the elements such as:
Contact me. etc...
I want to seperate them apart and give them icons and align the text to the right.
(I'm using bootstrap4) however nothing seems to be working not even in the css.
<div class="navbar navbar-top" id="navbar-toolbar">
<div class"container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">+97433653399</a style="background-color: #ffff;">
<a class="nav-link" href="#">Contact</a>
<a class="nav-link" href="#">Help</a>
</li>
</div>
</ul>
</div>
Navbar
Home (current)
Login
Register
Contat us
I see that you are new to HTML and CSS, w3schools.com would be a great start. I can see that you still have some issues in wrapping your HTML elements (e.g. when to open and close a <div> tag. Before proceeding to CSS, it is advisable that you already learned the basics of HTML because you will be using them when putting an attribute that you want to access in CSS (e.g. id="", class="", name="", type="", etc.)
Basically, I have to apply a backup of a Joomla Website, ... the problem is, that the navigation of the backup does not apply the correct CSS and therefore is not displayed correctly, which I found out by using inspect element.
Now I'm facing the issue that I have no idea on how to change the CSS-classes.
I compared the two template files and found no differences in how the CSS is applied:
<header id="header" class="single-menu flat-menu">
<div class="navbar-collapse nav-main-collapse collapse">
<div class="container">
<nav class="nav-main">
<jdoc:include type="modules" name="navigation" style="none" />
</nav>
</div>
</div>
</header>
The navigation module implements the main menu, yet does not apply any extra CSS and neither does the main menu.
There are seemingly no differences in the template-file or the CSS-files.
So my question now is: How exactly does Joomla apply the correct CSS to the navigation? I can't seem to find any way and yet with inspect element you can see that the webpage where the navigation is displayed correctly has the class:
<ul class="nav nav-pills nav-main">
<li class="item-xxx dropdown">
and the one where it is displayed incorrectly has:
<ul class="nav menu">
<li class="item-xxx deeper parent">
I fixed it now:
My problem was that on the webpage the override for the default.php of the menu module was directly in the root/modules/mod_menu folder, which gets overridden on an update. So I had to copy the correct default.php into the new override folder (root/templates/template/html/mod_menu/ ) and everything worked again.
I am learning twitter bootstrap 3 these days.
There is a class called "active" in bootstrap. I have seen this feature even in CSS. As I know it indicates the active page or link (probably it is the page that we are currently in). Please correct me if I am wrong. What I need to know is why we need to call such a class in our mark-up. Because it is upto the user to decide which page that he needs to be in.
If I explain this further below mark-up has used class="active" in the 2nd list element. (i.e Profile). When I run the code in a browser it adds a nice blue background to Profile. Why should I add such a class? Active tabs vary when users navigate from one tab to another. Is not it?
<div class="container">
<div class="row">
<nav>
<ul class="nav nav-pills nav-justified">
<li>Dashboard</li>
<li class="active">Profile</li>
<li>Earnings</li>
<li>Settings</li>
</ul>
</nav>
</div>
</div>
With 4 pages in your Navigation, the .active class should be on each different list item from #1 to #4 depending on the page you're in. Below are 4 excerpts for each 4 pages.
Breadcrumbs.html:
<ul class="nav nav-pills nav-justified">
<li class="active">Dashboard</li>
<li>Profile</li>
<li>Earnings</li>
<li>Settings</li>
</ul>
Jumbotron.html:
<ul class="nav nav-pills nav-justified">
<li>Dashboard</li>
<li class="active">Profile</li>
<li>Earnings</li>
<li>Settings</li>
</ul>
FavoutieActors.html:
<ul class="nav nav-pills nav-justified">
<li>Dashboard</li>
<li>Profile</li>
<li class="active">Earnings</li>
<li>Settings</li>
</ul>
Breadcrumbs.html:
<ul class="nav nav-pills nav-justified">
<li>Dashboard</li>
<li>Profile</li>
<li>Earnings</li>
<li class="active">Settings</li>
</ul>
The active class is applied to the navigation element the user is currently viewing.
In the case of your given code, the user is viewing the the profile. It will serve as a guide or reminder to where in the website the visitor is in. That is why the active class is applied, which comes handy when viewing a website with many navigation links.
You can dynamically add the active class to whichever element is active. You can either do this as your page is rendered. Or via JavaScript, if you wish to change the active element without posting back to the server.
From your example, by adding the active class to your 'Profile' item, it should render the item in a way that suggests visually that this is the current item or page you're viewing.
What I need to know is why we need to call such a class in our mark-up. Because it is upto the user to decide which page that he needs to be in.
The user decide what page and the designer and developer decide how its button look while the user on it. The active class can do more than it's just a markup in your page. It could be used to add different look and feel, color effects etc.
Why should I add such a class? Active tabs vary when users navigate from one tab to another. Is not it?
You are not required to add and manage in many usual cases but sometimes you might need. From design point of view, it tells the user that he/she is now here, from programming point of view that class could be used in different ways to assign unique action for that button or other button and not for it.
The same thing for first and last classes we usually add, they allow us to do different scenarios or CSS proprieties for these buttons and/or elements.
Class="active" is usually used to highlight any active content from a selection, mostly in navigation. Let's say in a website with different page links on navigation, just to indicate that the user is on this page, active class highlights that link increasing the usability of navigation.
I've looked at this for a number of hours now and can't figure out what is going on. Any help would be much appreciated thank you. It is a very strange problem and rather than going into detail I thought it best to just show you, so please find below a link to problem, currently on the development page of my website.
http://dev.cccit.co.uk/about-us/our-team/
As you can see the active dropdown seems to work along with the header being active in the nav bar as well, however when highlighting the nav select it is making the header appear darker and also not selecting the whole box (missing out the information section). It is probably easier to just see for yourself.... hover over About Us in the nav bar and you will see.
I thought initially this might be css related.... there is a separate css file for color selection which I have changed every option without any affect, and what makes me think this won't help is the strange way in which the whole menu is not changing when you hover. Please find a copy of the code below, bear in mind I'm using php for this section, but it also does the same thing regardless, so I have also changed the header for "Support" so that you can see it is doing the same thing.
I thought someone may have come across the same thing, if you need any more information or files, then please get in touch. Thank you in advance
`div class="container">
<div id="nav-wrapper">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="buttons-container">
</div>
<div class="nav-collapse">
<ul class="nav nav-pills">
<li class="single"><a href="../index.php">HOME
<i></i>
</a>
</li>
<li <?php if($pageName == "About Us")echo " class='dropdown active' ";?> class="dropdown">
<a href='/about-us'>
ABOUT US<i></i>
</a>
<ul class="dropdown-menu">
<li <?php if($pageMetaTitle == "Our Team")echo " class='active' ";?>>Our Team</li>
<li <?php if($pageMetaTitle == "Philosophy")echo " class='active' ";?>>Philosophy</li>
<li <?php if($pageMetaTitle == "FAQs")echo " class='active' ";?>>FAQs</li>
</ul>
</li>
<li class="dropdown active">
<a href="/support">
SUPPORT<i>IT support for business</i>
</a>
<ul class="dropdown-menu">
<li>Support Packages</li>
<li>Service Level Agreements</li>
<li>FAQs</li>
</ul>
</li>
`
Remove the custom background colors you set have for the <i> tags.
Noticing the hover effects on Firebug, the colors don't match the hover effects of the parent element.