I have the following,
<header id="header">
<div class="header__top">
<div class="container">
<ul class="top-nav"><!-- new name -->
<li class="dropdown top-nav__profile">
Hi Mallinda!
<ul class="dropdown-menu">
<li>Profile</li>
<li class="top-nav__saved">Saved Searches</li>
<li class="top-nav__saved">Saved Agents</li>
<li class="top-nav__saved">Saved Listings</li>
<li>Email Preferences</li>
<li>Logout</li>
</ul>
</li>
<li class="top-nav__icon">
<i class="zmdi zmdi-notifications"></i>
</li>
<li class="pull-right top-nav__icon">
<i class="zmdi zmdi-facebook"></i>
</li>
<li class="pull-right top-nav__icon">
<i class="zmdi zmdi-twitter"></i>
</li>
<li class="pull-right top-nav__icon">
<i class="zmdi zmdi-google"></i>
</li>
</ul>
</div>
</div>
</header>
Since I have a lot of nested classes, I've decided to choose a new name 'top-nav' after certain level. Is it valid in BEM? or do I need to phrase block name 'header__' to every child element?
You may put blocks inside other blocks or elements. It is absolutely valid.
Related
I am using materialize collapsible for my navigation. Everything works fine except when I reload the page. The collapsible gets closed and I have to manually make it active again. How do I make the collapsible remain active on page reload?
Here's my code:
<ul id="slide-out" class="side-nav fixed leftside-navigation">
<ul class="collapsible" data-collapsible="expandable">
<li>
<a class="collapsible-header">
<i class="material-icons">home</i> Home
</a>
<div class="collapsible-body">
<ul>
<li ui-sref-active="active">
<a ui-sref="protect" ui-sref-opts="{reload: true}">
<i class="material-icons">dashboard</i> Dashboard
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="store" ui-sref-opts="{reload: true}">
<i class="material-icons">cloud_done</i> Storage
</a>
</li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header">
<i class="material-icons">event_available</i>Manage
</a>
<div class="collapsible-body">
<ul>
<li ui-sref-active="active">
<a ui-sref="manage" ui-sref-opts="{reload: true}">
<i class="material-icons">storage</i> Manage Storage
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="enroll" ui-sref-opts="{reload: true}">
<i class="material-icons">file_download</i> Enroll
</a>
</li>
</ul>
</div>
</li>
</ul>
</ul>
What you want to do concerns program state, hence there's no way for you to do that unless you save the name or id of the active accordion. which can easily be done using browser local storage.
I am trying to put an icon at the end of my navigation bar.
When I put it before my ul tags, it shows up, according to this code:
<div class="navigation">
<i class="fa fa-instagram"></i>
<ul>
<li class="menu active">Discover</li>
<li class="menu">Fashion</li>
<li class="menu">Creative portraits</li>
<li class="menu">Client work</li>
<br>
<br>
<li class="contact">About</li>
<li class="contact">Contact</li>
</ul>
<br>
<br>
</div>
However, as soon as I place the icon after, it does not show up, as demonstrated in this code.
<div class="navigation">
<i class="fa fa-instagram"></i>
<ul>
<li class="menu active">Discover</li>
<li class="menu">Fashion</li>
<li class="menu">Creative portraits</li>
<li class="menu">Client work</li>
<br>
<br>
<li class="contact">About</li>
<li class="contact">Contact</li>
</ul>
<br>
<br>
<i class="fa fa-instagram"></i>
</div>
What can I do to make it appear??
Your code works fine, see below. Maybe you should add your CSS to find the problem.
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="navigation">
<i class="fa fa-instagram"></i>
<ul>
<li class="menu active">Discover</li>
<li class="menu">Fashion</li>
<li class="menu">Creative portraits</li>
<li class="menu">Client work</li>
<br>
<br>
<li class="contact">About</li>
<li class="contact">Contact</li>
</ul>
<br>
<br>
<i class="fa fa-instagram"></i>
</div>
Your code working fine. Add font awesome CDN <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
. This will work for you
I am working on the BucketAdmin template by Theme Bucket.
Everything works smooth but when I edit the Side-bar code, it stops collapsing and opening. Here is the original code.
I am a newbie at this so please also explain the issue.
<aside>
<div id="sidebar" class="nav-collapse">
<!-- sidebar menu start-->
<div class="leftside-navigation">
<ul class="sidebar-menu" id="nav-accordion">
<li>
<a href="index.html">
<i class="fa fa-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-laptop"></i>
<span>Layouts</span>
</a>
<ul class="sub">
<li>Boxed Page</li>
<li>Horizontal Menu</li>
<li>Language Switch Bar</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-book"></i>
<span>UI Elements</span>
</a>
<ul class="sub">
<li>General</li>
<li>Buttons</li>
<li>Typography</li>
<li>Widget</li>
<li>Slider</li>
<li>Tree View</li>
<li>Nestable</li>
<li>Grids</li>
<li>Calender</li>
<li>Draggable Portlet</li>
</ul>
</li>
<li>
<a href="fontawesome.html">
<i class="fa fa-bullhorn"></i>
<span>Fontawesome </span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-th"></i>
<span>Data Tables</span>
</a>
<ul class="sub">
<li>Basic Table</li>
<li>Responsive Table</li>
<li>Dynamic Table</li>
<li>Editable Table</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-tasks"></i>
<span>Form Components</span>
</a>
<ul class="sub">
<li>Form Elements</li>
<li>Advanced Components</li>
<li>Form Wizard</li>
<li>Form Validation</li>
<li>Muliple File Upload</li>
<li>Dropzone</li>
<li>Inline Editor</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-envelope"></i>
<span>Mail </span>
</a>
<ul class="sub">
<li>Inbox</li>
<li>Compose Mail</li>
<li>View Mail</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class=" fa fa-bar-chart-o"></i>
<span>Charts</span>
</a>
<ul class="sub">
<li>Morris</li>
<li>Chartjs</li>
<li>Flot Charts</li>
<li>C3 Chart</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class=" fa fa-bar-chart-o"></i>
<span>Maps</span>
</a>
<ul class="sub">
<li>Google Map</li>
<li>Vector Map</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;" class="active">
<i class="fa fa-glass"></i>
<span>Extra</span>
</a>
<ul class="sub">
<li class="active">Blank Page</li>
<li>Lock Screen</li>
<li>Profile</li>
<li>Invoice</li>
<li>Pricing Table</li>
<li>Timeline</li>
<li>
Media Gallery
</li>
<li>404 Error
</li>
<li>500 Error</li>
<li>Registration</li>
<li>Blank2</li>
</ul>
</li>
<li>
<a href="login.html">
<i class="fa fa-user"></i>
<span>Login Page</span>
</a>
</li>
</ul>
</div>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end-->
Here is the edited code
<aside>
<div id="sidebar" class="nav-collapse">
<!-- sidebar menu start-->
<div class="leftside-navigation">
<ul class="sidebar-menu" id="nav-accordion">
<li> <i class="fa fa-dashboard"></i> <span>Dashboard</span> </li>
</ul>
</div>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end-->
Don't delete, I simply commented the part which I wanted to remove and it worked.
I have this in my HTML , I am using bootstrap 3 classes to make a drop down with in another drop down.
<div class="subnav">
<ul class="nav-pills">
<li class="dropdown" style="float: right;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" >
<span id="spnUsrName">Welcome, {{usrName}}</span>
</a>
<ul class="dropdown-menu pull-right">
<li class="disabled" >Disabled link 1</li>
<li class="disabled" >Disabled link 2</li>
<li class="divider"></li>
<li class="dropdown-submenu">Settings
<ul class="dropdown-menu">
<li>Change Password</li></ul>
</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
However, the 'ul' inside the first dropdown-meu is not showing up. The "Settings" option is displayed, but change password option is not displayed. Where have I gone wrong.
I'm having a little trouble getting a collapsible side nav built with Bootstrap 3 to behave on a site I'm working on. I've started getting way too much vertical space between <li>s but I can't figure out where it's coming from. I thought it might be from Wordpress adding <p> and <br> tags and while that certainly isn't helping it also doesn't seem to be the primary problem.
A sample URL is:
http://cbipath.com/arabic/aa-tax-regulations-that-protect-the-rich/
And the code in question is:
(Note that this is still a work in progress, so it's rife with broken links etc.)
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="sidebar-nav">
<p class="sidenav-header">
Units and Lessons:
</p>
<ul class="nav nav-list accordion" id="sidenav-accordion">
<li>
<div class="accordion-heading">
<a data-toggle="collapse" data-target="#content-areas"><span class="nav-header-primary">
Content Areas <i class="icon-chevron-right"></i>
</span></a>
</div>
<ul class="nav nav-list collapse" id="content-areas">
<li>All <i class="icon-chevron-right"></i>
</li>
<li>
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#content-areas" href="#nav-urban-planning"><span class="nav-header-secondary">
Urban Planning <i class="icon-chevron-right"></i></span></a>
</div>
<ul class="nav-tertiary nav-list collapse" id="nav-urban-planning">
<li>Introduction
</li>
<li>Urban Planning 1
</li>
<li>Urban Planning 2
</li>
<li>Urban Planning 3
</li>
<li>Urban Planning 4
</li>
</ul>
</li>
<li>
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#content-areas" href="#nav-sustainability"><span class="nav-header-secondary">
Sustainability <i class="icon-chevron-right"></i></span></a>
</div>
<ul class="nav-tertiary nav-list collapse" id="nav-sustainability">
<li>Introduction
</li>
<li>Sustainability 1
</li>
<li>Sustainability 2
</li>
<li>Sustainability 3
</li>
<li>Sustainability 4
</li>
</ul>
</li>
<li>
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#content-areas" href="#nav-public-administration"><span class="nav-header-secondary">
Public Administration <i class="icon-chevron-right"></i></span></a>
</div>
<ul class="nav-tertiary nav-list collapse" id="nav-public-administration">
<li>Introduction
</li>
<li>Public Administration 1
</li>
<li>Public Administration 2
</li>
<li>Public Administration 3
</li>
<li>Public Administration 4
</li>
</ul>
</li>
<li>
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#content-areas" href="#nav-health"><span class="nav-header-secondary">
Health <i class="icon-chevron-right"></i></span></a>
</div>
<ul class="nav-tertiary nav-list collapse" id="nav-health">
<li>Introduction
</li>
<li>Lesson: What is Epilepsy? (Turkish)
</li>
<li>Lesson: Pathology (Turkish)
</li>
</ul>
</li>
</ul>
<!-- End Content Areas Internal UL -->
</li>
<!-- End Content Areas List Item-->
<li>
<!-- Begin Languages List Item-->
<div class="accordion-heading">
<a data-toggle="collapse" data-target="#languages"><span class="nav-header-primary">
Languages <i class="icon-chevron-right"></i>
</span></a>
</div>
<ul class="nav nav-list collapse" id="languages">
<li>All <i class="icon-chevron-right"></i>
</li>
<li>
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#languages" href="#nav-arabic"><span class="nav-header-secondary">
Arabic <i class="icon-chevron-right"></i></span></a>
</div>
<ul class="nav-tertiary nav-list collapse" id="nav-arabic">
<li>Overview
</li>
<li>Education and Democracy in the Arab World
</li>
<li>Tax Regulations that Protect the Rich
</li>
<li>Minorities in the Arab World
</li>
<li>Revolution, Equality, and Women's Rights
</li>
</ul>
</li>
<li>
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#languages" href="#nav-turkish"><span class="nav-header-secondary">
Turkish <i class="icon-chevron-right"></i></span></a>
</div>
<ul class="nav-tertiary nav-list collapse" id="nav-turkish">
<li>Overview
</li>
<li>Lesson: What is Epilepsy?
</li>
<li>Lesson: Pathology
</li>
<li>Lesson: Pathology
</li>
</ul>
</li>
<li>
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#languages" href="#nav-hebrew"><span class="nav-header-secondary">
Hebrew <i class="icon-chevron-right"></i></span></a>
</div>
<ul class="nav-tertiary nav-list collapse" id="nav-hebrew">
<li>Overview
</li>
<li>Israel's Declaration of Independence
</li>
</li>
</ul>
</li>
</ul>
</li>
<!-- End Languages List Item-->
</ul>
</div>
I've been staring at this for awhile now -- any help would be appreciated.
EDIT: To be more specific -- I'd like to decrease the vertical space between the items. They seem to be getting arbitrarily high heights but when I try to specify a height it breaks the collapse action.
Answering my own here:
This was caused by <br> tags getting inserted into the code. This comes up from time to time with Wordpress and can usually be handled by adding two lines of code to functions.php as instructed here:
http://codex.wordpress.org/Function_Reference/wpautop
I have that in my functions.php, so it seems likely that they were being inserted due to a plugin (I haven't definitively figured out which one yet). A temporary fix is adding:
.sidebar-nav br {
display: none;
}
to the custom CSS file. It seems likely these are getting added by the PageBuilder plugin by SiteOrigin which is otherwise a really great plugin. I'll update here if I'm able to definitively establish that.