Edit Bootstrap Navigation Links Drop Downs How To's

BlogrCart Closet Blogger theme comes equipped with fixed (or floating) main navigation menu bar with drop links, un-obstructive pop-up modal search field, a pop-up modal view shopping cart & social icon links. In addition drop down Labels widget comes pre-installed to help up organise your store products categorisations. Below are indicators & tutorial on how to customise BlogCart Closet theme fixed/floating main navigation link bar with example codes & detail instructions for customisations.

$ 45.00

- Select Colour - Blue White Black

- Select Size - Size S Size M Size L

Add to Cart

• Codes & Instructions
• Nav Link Structure
• Custom Drop Down Labels

In your template editor below are the codes for the floating/fixed main navigation bar powered by Bootstrap 3.0++ responsive framework. <!-- Start navigation --> <nav class='navbar navbar-inverse navbar-fixed-top' role='navigation'>   <div class='container'>     <!-- Brand and toggle get grouped for better mobile display -->     <div class='navbar-header'>       <button class='navbar-toggle collapsed' data-target='#blogrcart-navbar' data-toggle='collapse' type='button'>         <span class='sr-only'>Toggle navigation</span>         <span class='icon-bar'/>         <span class='icon-bar'/>         <span class='icon-bar'/>       </button>       <a class='navbar-brand' expr:href='data:blog.homepageUrl'><data:blog.title/></a>     </div>   <div class='collapse navbar-collapse' id='blogrcart-navbar'>       <ul class='nav navbar-nav'>         <li class='active'><a href='#'>About Us <span class='sr-only'>(current)</span></a></li>         <li class='dropdown'>           <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Collection <span class='caret'/></a>           <ul class='dropdown-menu' role='menu'>      <li class='category-drop'>               <b:section class='category1' id='category1' showaddelement='no'>                 <b:widget id='Label4' locked='false' title='Labels' type='Label'>                   <b:includable id='main'>           <b:if cond='data:display == &quot;list&quot;'>             <b:loop values='data:labels' var='label'>               <b:if cond='data:blog.url == data:label.url'>                 <a class='navbar-text' expr:href='data:label.url'><data:label.name/>                   <b:if cond='data:showFreqNumbers'>                   &amp;nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>                   </b:if>    </a>                 <b:else/>                  <a class='navbar-text' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/>                   <b:if cond='data:showFreqNumbers'>                   &amp;nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>                   </b:if>    </a>               </b:if>             </b:loop>             <b:else/>             <b:loop values='data:labels' var='label'>               <b:if cond='data:blog.url == data:label.url'>                 <a class='navbar-text' expr:href='data:label.url'><data:label.name/>                   <b:if cond='data:showFreqNumbers'>                   &amp;nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>                   </b:if>    </a>                 <b:else/>                  <a class='navbar-text' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/>                   <b:if cond='data:showFreqNumbers'>                   &amp;nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>                   </b:if>    </a>               </b:if>              </b:loop>           </b:if>           <b:include name='quickedit'/>       </b:includable>                 </b:widget>               </b:section>             </li>             <li class='divider'/>             <li><a href='/search/Label'>Show All Collection</a></li>           </ul>         </li>         <li class='dropdown'>           <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Category <span class='caret'/></a>           <ul class='dropdown-menu' role='menu'>      <li class='category-drop'>               <b:section class='category2' id='category2' showaddelement='no'>                 <b:widget id='Label3' locked='false' title='Labels' type='Label'>                   <b:includable id='main'>           <b:if cond='data:display == &quot;list&quot;'>             <b:loop values='data:labels' var='label'>               <b:if cond='data:blog.url == data:label.url'>                 <a class='navbar-text' expr:href='data:label.url'><data:label.name/>                   <b:if cond='data:showFreqNumbers'>                   &amp;nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>                   </b:if>    </a>                 <b:else/>                  <a class='navbar-text' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/>                   <b:if cond='data:showFreqNumbers'>                   &amp;nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>                   </b:if>    </a>               </b:if>             </b:loop>             <b:else/>             <b:loop values='data:labels' var='label'>               <b:if cond='data:blog.url == data:label.url'>                 <a class='navbar-text' expr:href='data:label.url'><data:label.name/>                   <b:if cond='data:showFreqNumbers'>                   &amp;nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>                   </b:if>    </a>                 <b:else/>                  <a class='navbar-text' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/>                   <b:if cond='data:showFreqNumbers'>                   &amp;nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>                   </b:if>    </a>               </b:if>              </b:loop>           </b:if>           <b:include name='quickedit'/>       </b:includable>                 </b:widget>               </b:section>             </li>             <li class='divider'/>             <li><a href='/search/Label'>Show All Categories</a></li>           </ul>         </li>         <li class='dropdown'>           <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Support <span class='caret'/></a>           <ul class='dropdown-menu' role='menu'>             <li><a href='#'>FAQ&#39;s</a></li>             <li><a href='#'>Feedback</a></li>             <li><a href='#'>Reviews</a></li>             <li><a href='#'>Privacy Policy</a></li>             <li><a href='#'>Terms &amp; Conditions</a></li>             <li><a href='#'>Returns &amp; Refunds</a></li>             <li><a href='#'>Delivery Status</a></li>             <li class='divider'/>             <li><a href='#'>Sitemap</a></li>           </ul>         </li>         <li><a href='#'>Look Book</a></li>         <li><a href='#'>Contact Us</a></li>       </ul>       <ul class='nav navbar-nav navbar-right'>         <li><a data-target='#blogrcart-view' data-toggle='modal' href='#'><i class='fa fa-shopping-cart fa-lg'/>  <span class='simpleCart_quantity'/> in Cart</a></li>         <li><a data-target='#blogrcart-search' data-toggle='modal' href='#'><i class='fa fa-search fa-lg'/></a></li>       </ul>     </div>   </div> </nav> <!-- End navigation -->

To edit your main navigation brand text find below codes:- <a class='navbar-brand' expr:href='data:blog.homepageUrl'>Brand</a> Edit the brand text to your Blogger store name. To add an image logo that will display for any screen sizes at your main navigation edit above codes to look like so:- <a class ='navbar-brand' expr:href='data:blog.homepageUrl'>   <img src='URL-TO-YOUR-UPLOADED-IMAGE' alt='' /> </a> Using the default template navigation settings, to edit a single link (without drop downs) on the main navigation, find code below:- <li><a href='#'>Look Book</a></li><li><a href='#'>Contact Us</a></li> Replace the # (hash) to your internal page url & edit the text before or in between <a href='...'>Edit Text to Display</a>. To edit a drop down menu, below is the example codes:-         <li class='dropdown'>           <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Support <span class='caret'/></a>           <ul class='dropdown-menu' role='menu'>             <li><a href='#'>FAQ&#39;s</a></li>             <li><a href='#'>Feedback</a></li>             <li><a href='#'>Reviews</a></li>             <li><a href='#'>Privacy Policy</a></li>             <li><a href='#'>Terms &amp; Conditions</a></li>             <li><a href='#'>Returns &amp; Refunds</a></li>             <li><a href='#'>Delivery Status</a></li>             <li class='divider'/>             <li><a href='#'>Sitemap</a></li>           </ul>         </li> Every <li> with a class of dropdown will automatically display the children links as a drop down menu. Refer the code structure above to apply the pre-installed styles by Bootstrap 3.0++ responsive framework that comes with the template. In addition adding a <li class='divider'/> will add a line in between your drop down links.

The Labels widget is located within the main navigation for this template. To edit the links, go to any page and click the "Category" or "Collection" link to view the drop down links. To edit, click the "pencil" icon and select the Labels you want to display as a link, for a drop down menu. Make sure you have created the related Labels at your Blogger post editor to make it available here & displayed by the widget,