Tutorial: Edit Drop Down Navigation for BlogrCart MNMUS Theme

BlogrCart MNMLUS Blogger theme/template comes equipped with a responsive menu navigation bar equipped with clickable drop down links. In addition drop down Labels widget comes pre-installed to help up organize (or categorize) your store products using Blogger editor built in Labels widget features.

Below are indicators & tutorial on how to customize BlogCart MNMLIS theme responsive main navigation link bar with example codes & detail instructions for customization provided.


In your template editor below are the codes for the floating/fixed main navigation bar powered by Bootstrap 3.0++ responsive framework.

<!-- NAVIGATIONS -->
        <div class='collapse navbar-collapse navbar-right' id='blogcart-collapse-2'>
          <ul class='nav navbar-nav'>
            <li class='dropdown'>
              <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Catalogue <i class='fa fa-angle-down'/></a>
              <ul class='dropdown-menu' role='menu'>
                <li class='category-drop'>
                  <b:section class='category1' id='category1' showaddelement='no'>
                    <b:widget id='Label99' locked='true' title='Catalogue' 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='' expr:href='data:label.url + &quot;?max-results=24&quot;'><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='' expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=24&quot;'><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='' 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='' expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=24&quot;'> <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 expr:href='data:blog.homepageUrl + &quot;search/label/?max-results=24&quot;'>View All</a></li>
              </ul>
            </li>
            <li class='dropdown'>
              <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Collections <i class='fa fa-angle-down'/></a>
              <ul class='dropdown-menu' role='menu'>
                <li class='category-drop'>
                  <b:section class='category2' id='category2' showaddelement='no'>
                    <b:widget id='Label98' locked='true' title='Collections' 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='' expr:href='data:label.url + &quot;?max-results=24&quot;'><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='' expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=24&quot;'><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='' 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='' expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=24&quot;'> <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 expr:href='data:blog.homepageUrl + &quot;search/label/?max-results=24&quot;'>View All</a></li>
              </ul>
            </li>
            <li class='dropdown'>
              <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown 1 <i class='fa fa-angle-down'/></a>
              <ul class='dropdown-menu' role='menu'>
                <li><a href='#'>About Theme</a></li>
                <li><a href='#'>Example Blogger Page</a></li>
                <li><a href='#'>Example Blogger Page</a></li>
                <li><a href='#'>Track Delivery</a></li>
                <li class='divider'/>
                <li><a href='#'>Tutorials</a></li>
              </ul>
            </li>
            <li><a href='/search/label/Blog'>Blog</a></li>
            <li><a href='#'>Contact Us</a></li>
          </ul>
        </div>
<!-- NAVIGATIONS -->

1.0 Customizing Logo Text [UPDATED]

Editing the logo text at main menu navigation bar is calling your Blogger blog store name. You can edit the text by editing your blog store name & customize the fonts styles by using Blogger Template Designer located at Template > Customize > Advance & find Header Logo Text > select the desired fonts to use.

1.1 Customizing a Single Link

Using the default template navigation settings, to edit a single link (without drop downs) on the main navigation, find code below:-

<li><a href='#'>Blog</a></li><li><a href='#'>Blog</a></li>

Replace the # (hash) to your internal page url & edit the text before or in between <a href='...'>Edit Text to Display Here</a>.

1.2 Customizing Drop Down Links

To edit a drop down menu, below is an example:-

            <li class='dropdown'>
              <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>About Us <i class='fa fa-angle-down'/></a>
              <ul class='dropdown-menu' role='menu'>
                <li><a href='#'>Company Background</a></li>
                <li><a href='#'>History</a></li>
                <li><a href='#'>Testimonials</a></li>
                <li><a href='#'>Current Activities</a></li>
                <li class='divider'/>
                <li><a href='#'>Returns</a></li>
                <li><a href='#'>Terms Service</a></li>
                <li><a href='#'>Privacy Policy</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.

1.3 Customizing Labels for Categorization

The Labels widget is located within the main navigation for this template. To edit the links, go to Blogger Layout & find the Labels widget located below the Header widget. Click Edit and use the many functions offered to display the links.

Important! Make sure blog owners have published several posts with Labels assigned to. This will automatically included using the Labels widget here.

To edit the Labels drop down display text at main navigation bar, in template editing mode, find or Jump to Widget Labels98 or Labels99 . An example link will look like so:-

<a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Collections <i class='fa fa-angle-down'/></a>

Edit the text highlighted in yellow.