How should you handle h tags in the main menu of your site if the main menu renders above the h1?
Is it ok to break heading hierarchy in this case to provide the additional semantics / hierarchy, or should a different element be used instead of heading tags?
For example:
You have menu that shows a secondary menu on hover / focus / click.
It uses a checkbox input to indicate the state of the menu so as to allow the menu to stay open.
The secondary menus use h2 > ul >li > a to organize and provide additional hierarchy to the overall menu.
Third level link lists follow the heading hierarchy, eg., h3 > ul > li > a
CodePen link for more clarity :: https://codepen.io/uxmfdesign/pen/yLBrMmd
<header>
<div class="main-menu__container">
<input
class="main-menu__toggle webaim-hidden"
type="checkbox"
id="main-menu-toggle-block-main-menu">
<!-- toggle open close -->
<label
class="main-menu__label"
for="main-menu-toggle-block-main-menu"
aria-label="Toggle Main menu"
>
Main menu
</label>
<nav class="main-menu__nav">
<div
class="main-menu-group"
data-main-menu-group="">
<!-- toggle open close of menu section -->
<input
id="main-menu-group-toggle-block-main-menu-0"
type="checkbox"
name="main-menu-group"
class="main-menu-group__toggle webaim-hidden"
data-main-menu-group-toggle="">
<label
for="main-menu-group-toggle-block-main-menu-0"
aria-label="Open Our services"
aria-haspopup="true"
data-icon=""
class="main-menu-group__toggle-label">
Section title
</label>
<div class="main-menu-group__wrapper">
<h2 class="main-menu-group__heading">
<span>Section title</span>
</h2>
<ul class="main-menu-nav-list">
<li class="main-menu-nav-list__item">
<h3 class="main-menu-nav-list__title">
<a class="main-menu-nav-list__title-link" href="/ca-domains">
Sub-section title
</a>
</h3>
<ul class="main-menu-subnav-list__menu">
<li class="main-menu-subnav-list__item main-menu-subnav-list__item--with-sub">
<a class="main-menu-subnav-list__link" href="/ca-domains/register-your-ca">
sub-page name
</a>
</li>
<li class="main-menu-subnav-list__item">
<a class="main-menu-subnav-list__link" href="/ca-domains/optimize-your-ca">
sub-page name
</a>
</li>
</ul>
</li>
<li class="main-menu-nav-list__item">
<h3 class="main-menu-nav-list__title">
<a class="main-menu-nav-list__title-link" href="/ca-domains">
Sub-section title
</a>
</h3>
<ul class="main-menu-subnav-list__menu">
<li class="main-menu-subnav-list__item main-menu-subnav-list__item--with-sub">
<a class="main-menu-subnav-list__link" href="/ca-domains/register-your-ca">
sub-page name
</a>
</li>
<li class="main-menu-subnav-list__item">
<a class="main-menu-subnav-list__link" href="/ca-domains/optimize-your-ca">
sub-page name
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div
class="main-menu-group"
data-main-menu-group="">
<!-- toggle open close of menu section -->
<input
id="main-menu-group-toggle-block-main-menu-0"
type="checkbox"
name="main-menu-group"
class="main-menu-group__toggle webaim-hidden"
data-main-menu-group-toggle="">
<label
for="main-menu-group-toggle-block-main-menu-0"
aria-label="Open Our services"
aria-haspopup="true"
data-icon=""
class="main-menu-group__toggle-label">
Section title
</label>
<div class="main-menu-group__wrapper">
<h2 class="main-menu-group__heading">
<span>Section title</span>
</h2>
<ul class="main-menu-nav-list">
<li class="main-menu-nav-list__item">
<h3 class="main-menu-nav-list__title">
<a class="main-menu-nav-list__title-link" href="/ca-domains">
Sub-section title
</a>
</h3>
<ul class="main-menu-subnav-list__menu">
<li class="main-menu-subnav-list__item main-menu-subnav-list__item--with-sub">
<a class="main-menu-subnav-list__link" href="/ca-domains/register-your-ca">
sub-page name
</a>
</li>
<li class="main-menu-subnav-list__item">
<a class="main-menu-subnav-list__link" href="/ca-domains/optimize-your-ca">
sub-page name
</a>
</li>
</ul>
</li>
<li class="main-menu-nav-list__item">
<h3 class="main-menu-nav-list__title">
<a class="main-menu-nav-list__title-link" href="/ca-domains">
Sub-section title
</a>
</h3>
<ul class="main-menu-subnav-list__menu">
<li class="main-menu-subnav-list__item main-menu-subnav-list__item--with-sub">
<a class="main-menu-subnav-list__link" href="/ca-domains/register-your-ca">
sub-page name
</a>
</li>
<li class="main-menu-subnav-list__item">
<a class="main-menu-subnav-list__link" href="/ca-domains/optimize-your-ca">
sub-page name
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<main>
<h1>
The problem heading is here
</h1>
</main>
Related
I'm trying to make my dashboard app more dynamic by adding a collapsable navbar. The nav should resize to only icons, and the main area should expand. But I'm kind of stuck on how to expand it from now on.
The project is based on the PHP Laravel framework 5.6.
I have tried different setups with grid columns.
<div class="container-fluid" id="wrapper">
<div class="row">
#include("test.components.sidenav")
<main class="col-xs-12 col-sm-8 col-lg-9 col-xl-10 pt-3 pl-4 ml-auto">
<div class="container-fluid" id="expandable">
<nav class="sidebar col-xs-12 col-sm-4 col-lg-3 col-xl-2" id="collapseId">
<h1 class="site-title">
<a href="{{ route('home') }}">
<em class="fab fa-accessible-icon"></em>
<span>Ready4It</span>
</a>
</h1>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">
<em class="fas fa-bars"></em>
</a>
<ul class="nav nav-pills flex-column sidebar-nav">
<li class="nav-item">
<a class="nav-link active" href="">
<em class="fas fa-home"></em>
<span>Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fas fa-ticket-alt nav-bar-icon"></em>
<span>Ticket overzicht</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-chart-line"></em>
<span>Statistieken</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-envelope"></em>
<span>Mail monitoring</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-clock"></em>
<span>Uren invoer</span>
</a>
</li>
</ul>
<a href="#" class="logout-button" id="logout-button">
<em class="fa fa-power-off"></em>
<span>Logout</span>
</a>
</nav>
<section class="row">
<div class="col-sm-12">
<div class="row">
#yield("content")
</div>
</div>
</section>
</div>
</main>
</div>
</div>
<script>
/* This script is for the mobile navbar collapse */
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$("#menu-collapse").click(function (e) {
e.preventDefault();
$("#collapseId").toggleClass("icons-only");
$("#logout-button").toggleClass("logout-button").toggleClass("logout-button-collapsed")
})
</script>
The nav should resize to only icons, and the main area should expand.
Try this one,
Add a fixed width to the class icons-only also adjust transform translate if needed
.icons-only {
width: some-width;
}
and also make sure you added same width as margin-left for main section ( apply this only if the icons-only class is added to nav )
I'm trying to align the icon vertically centered to the text in the nav bar items.
I tried using align-middle to the nav-link since both text and image are there, but did not work.
Align-top to the img only moves the element to the top, but does not work when doing align-middle to the img.
Finally, I only achieved what I wanted adding margin-bottom to the img, but do not want to use that, What is wrong with align-middle?
<ul class="navbar-nav mx-auto w-100 ">
<li class="nav-item">
<a class="nav-link align-middle" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/tuerca/B Tuerca GRAY.svg" class="iconos" alt="tuerca">
<h4 class="d-inline">Test 1</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link align/middle" routerLink="/backoffice/contractors" routerLinkActive="active" style="display:block">
<img src="/assets/icons/B_Toolbox_Gray.svg" class="iconos" alt="toolbox">
<h4 class="d-inline">Test 2</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link align-middle" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
<h4 class="d-inline">test 3</h4>
</a>
</li>
</ul>
A part of the problem is that in Bootstrap 4 <h4> elements have a bottom margin defined by default. You can eliminate that by setting .my-0 on them.
Then to make the icon and the text vertically aligned, use .d-flex .align-items-center on the .nav-link elements. This way you can remove .d-inline from <h4> as well.
<ul class="navbar-nav mx-auto w-100 ">
<li class="nav-item">
<a class="nav-link d-flex align-items-center" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/tuerca/B Tuerca GRAY.svg" class="iconos" alt="tuerca">
<h4 class="my-0">Test 1</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" routerLink="/backoffice/contractors" routerLinkActive="active" style="display:block">
<img src="/assets/icons/B_Toolbox_Gray.svg" class="iconos" alt="toolbox">
<h4 class="my-0">Test 2</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
<h4 class="my-0">test 3</h4>
</a>
</li>
</ul>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
Using gumby CSS framework, when in mobile layout, the top level anchors with dropdowns are clickable. When clicked, the anchor loads a new page instead of showing the dropdowns. Has anyone encountered this problem and found a solution?
<div class="row navbar pretty" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
<h1 class="four columns logo">
<a href="#">
<img src="/img/gumby_mainlogo.png" gumby-retina />
</a>
</h1>
<ul class="eight columns">
<li>Features</li>
<li>
<!-- This link opens dropdown but also redirects to the href -->
Documentation
<div class="dropdown">
<ul>
<li>The Grid</li>
<li>UI Kit</li>
<li>Sass</li>
<li>JavaScript</li>
<li>Demo</li>
</ul>
</div>
</li>
<li>Customize</li>
</ul>
</div>
Your anchor was pointing to google.com instead of itself "#"
Also I would try and avoid opening a div inside of a list for your css to use, instead add aclass to your lists
should be:
<div class="row navbar pretty" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
<h1 class="four columns logo">
<a href="#">
<img src="/img/gumby_mainlogo.png" gumby-retina />
</a>
</h1>
<ul class="eight columns">
<li>Features</li>
<li>
<!-- This link opens dropdown but also redirects to the href -->
Documentation
<ul class="dropdown">
<li>The Grid</li>
<li>UI Kit</li>
<li>Sass</li>
<li>JavaScript</li>
<li>Demo</li>
</ul>
</li>
<li>Customize</li>
</ul>
</div>
I'm building a site with Bootstrap 2, and I'd like to add a dropdown menu to one item in the navbar.
Simple enough. However, when the dropdown is expanded, it appears underneath the incorrect item in the navbar:
Notice in the above screenshot that the dropdown renders underneath "Admin" (the leftmost navbar element) instead of "Locator" (the element that activates the dropdown).
How do I fix this so that the dropdown appears underneath the correct navbar element?
Here is the HTML for the navbar:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="...">Dashboard</a>
<div class="nav-collapse collapse pull-right">
<ul class="nav">
<li>Admin</li>
<li>Find Trips</li>
<!-- Locator Dropdown -->
<li>
<a id="nav-locator-dropdown" class="dropdown-toggle" href="..."
data-toggle="dropdown" data-target="#">
Locator
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="nav-locator-dropdown">
<li>My Trips</li>
<li>Create Trip</li>
</ul>
</li>
<li>My Profile</li>
<li>Log Out</li>
</ul>
</div>
</div>
</div>
</div>
Your dropdown is appearing on the wrong spot because you're missing the class that defines the relative position for your dropdown. To fix this, just add the .dropdown class to your menu item with a submenu like so:
<li class="dropdown"> ... </li>
Here is your fixed markup:
HTML
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="...">Dashboard</a>
<div class="nav-collapse collapse pull-right">
<ul class="nav">
<li>Admin</li>
<li>Find Trips</li>
<!-- Locator Dropdown -->
<li class="dropdown">
<a id="nav-locator-dropdown" class="dropdown-toggle" href="..."
data-toggle="dropdown" data-target="#">
Locator
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="nav-locator-dropdown">
<li>My Trips</li>
<li>Create Trip</li>
</ul>
</li>
<li>My Profile</li>
<li>Log Out</li>
</ul>
</div>
</div>
</div>
</div>
I am sure somebody has aleady posted such a question but I could not find a solution.
I am using Ruby on Rails, Brootstrap and I want to be my dropdown menu(whole) in the middle of the page, but the text (links like We, What we do and etc...) in the dropdown-menu should be left-sided.
How can I do it?
<div class="btn-toolbar">
<div class="btn-group">
<button id="action-btn" class="btn dropdown-toggle" data-toggle="dropdown">
About us
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="del">
<strong> We</strong>
</a>
</li>
<li>
<div class="mcol">
<ul class ="sub">
<div class ="subcolumns menuactivity">
What we do
</li>
Countries
</div>
</ul>
<li>
<a href="del">
<strong>References </strong>
</a>
</li>
</ul>
<div class="btn-group">
<button id="action-btn" class="btn dropdown-toggle" data-toggle="dropdown">
News & Events
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="del">
<strong>Calender</strong>
</a>
</li>
<ul class ="sub">
<div class ="subcolumns menuactivity">
<li>
News archive
</li>
</ul>
</div>
</ul>
</div>
If you're using bootstrap as it is by default you can try below
<a class="pull-left" href="details"> What we do </a>
I have updated with an example.
http://jsfiddle.net/acc8t/
I did this by using below css
.sub{margin-left:0px;}
I have founf as well another solution already.
Just to put in css the following code:
.dropdown-menu {
text-align: left;
}
.btn-toolbar{
text-align: center;
padding-bottom:40px;
}