Jump to content

[Resolved] Changing Font Size for MenuBar


LaughingHorse

Recommended Posts

I am trying to get the fonts bigger in the top menu that has the icon of the Home, and the names of the products.

 

I tried adding <span style="font-size: 2.0em;"> </span> between various <li></li> tags in

template file box.navigation.php

But that did not seem to work. How can I make the fonts in that section bigger?

Thanks in Advance!

Link to comment
Share on other sites

That should have worked. Although the result will be absurdly large letters.

Perhaps the change did not show because CubeCart is using a cached copy of the template. When making changes to a template, I suggest you have CubeCart to not use the cache (admin, Store Settings, Advanced tab, Caching - Disabled).

I think a better solution is:

In the file cubecart.default.css, add the following:

.top-bar-section ul li > a {
    font-size: 1.0rem; /* adjust to suit */
}

 

Link to comment
Share on other sites

My cart is set to Caching - Disabled there was no change.

So I modified

.top-bar-section ul li > a {
    font-size: 16px; /* adjust to suit */
}

Went into the control panel and removed the cache.

Still no change. So I changed that file back.

I then changed the html in box/navigation.php to the following:

{if $CATEGORIES}
{$CATEGORIES}
{else}
<nav class="top-bar category-nav" data-topbar="" id="box-navigation">
  <ul class="title-area">
     <li class="name"></li>
     <li class="toggle-topbar left"><span style="font-size: 2.0em;"><a href="">{$LANG.navigation.title} <i class="fa fa-caret-down"></i></b></span></li>
</ul>
  <section class="top-bar-section">
     <ul class="left">
        <li class="show-for-medium-up"><span style="font-size: 2.0em;"><a href="{$STORE_URL}" title="{$LANG.common.home}"><i class="fa fa-home"></i></a></span></li>
        {$NAVIGATION_TREE}
        {if $CTRL_CERTIFICATES && !$CATALOGUE_MODE}
        <li><a href="{$STORE_URL}/gift-certificates.html" title="{$LANG.navigation.giftcerts}">{$LANG.navigation.giftcerts}</a></li>
        {/if}
        {if $CTRL_SALE}
        <li><a href="{$STORE_URL}/sale-items.html" title="{$LANG.navigation.saleitems}">{$LANG.navigation.saleitems}</a></li>
        {/if}
     </ul>
  </section>
</nav>
{/if}

Cleared the cache, and only the picture of the House got bigger. See attachment

Top Menu - Screenshot from 2015-12-16 15:13:17.png

Link to comment
Share on other sites

Working the list items, I see in the code above the new <span> in the one list item that shows the Home icon. The other list items are in the Foundation template file element.navigation_tree.php.

My suggestion, changing the CSS, and then not seeing any change, is likely due to your browser using its own cached copy of cubecart.default.css. Try adding the CSS rule back into cubecart.default.css and force your browser to reload all the page's resources (CSS, images, javascript).

If possible, let's us see the store and we may be able to make further suggestions.

Link to comment
Share on other sites

In the Foundation file cubecart.default.css, I currently see:

/* Use this to add specific CSS for this subtheme */

/* adjust to suit font size in the top menu bar */
.top-bar-section ul {font-size: 1.5em; }

Please edit this file to be:

/* Use this to add specific CSS for this subtheme */

/* adjust to suit font size in the top menu bar */

.top-bar-section ul li > a {
    font-size: 16px; /* adjust to suit */
}

Then force your browser to reload the page's resources.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...