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>
Related
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>
Semantic-ui is integrated with my laravel app. All buttons are working but Menubar is not working i.e whatever code I copied from documentation it is showing like that only.
I have linked these files -
<link rel="stylesheet" type="text/css" href="{{asset('semantic/dist/semantic.min.css')}}">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="{{asset('semantic/dist/semantic.min.js')}}"></script>
<div class="ui secondary menu">
<a class="active item"> Home </a>
<a class="item"> Messages </a>
<a class="item"> Friends </a>
<div class="right menu">
<div class="item">
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="search link icon"></i>
</div>
</div>
<a class="ui item"> Logout </a>
</div>
By default Home is active but when i click or focus on another item i.e messages or Friends , it is not showing as active otherwise hovering effect is working fine.
As you see, only the first menu item is marked as active in your code, so why do you expect any other menu items to be marked as active when you click on them?
<a class="active item"> Home </a>
You should detect which menu item is active when you render the menu and set active class to the necessary item.
So, for example, when you are on "Home" page your menu should look like this:
<a class="active item"> Home </a>
<a class="item"> Messages </a>
<a class="item"> Friends </a>
But when your are on the "Friends" page your menu should look like this instead:
<a class="item"> Home </a>
<a class="item"> Messages </a>
<a class="active item"> Friends </a>
And everything else depends on your implementation (either it's PHP or other server-side language if you generate your menu or JavaScript if you toggle its state in the browser).
I'm using the getbootstrap code for default navbar.
I want the title name of Drop-down (Test2) also to link to a html page. I added the linkage for the href, however when I'm running the page and clicking on the Drop-down text (Text2) nothing happened
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand">Test</a>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-header" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>test1</li>
<li class="dropdown">
Test2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Test21</li>
<li>Create Test22</li>
<li>Test23</li>
</ul>
</li>
<li>Test3</li>
<li>Test4</li>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
Hyperlink in navbar dropdown doesn't seem to work.Even the "disabled" doesn't seem to work.
Here is my code
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle disabled"
data-toggle="dropdown" href="http://www.google.com"> Link
<b class="caret"></b> </a>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li></ul>
</li>
</ul>
</div>
</div>
</div>
Clicking the link where you have set Google as the link won't take you to that link as the click action on that link opens/closes the dropdown menu.
If you put a link on another anchor tag you'll see that those will work fine.
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>