Jump to content


This topic is now archived and is closed to further replies.


osCommerce 2.3. Bootstrap Nav menu

Recommended Posts

Thank you, that's great. 

Now to complete the horizontal menu it would be great it I can change the categories button that appears on re-size to a hamburger button.      Of course I'll have to re-think the top menu hamburger button, but I think its better placed for the navigation bar, people are more accustom to it there.   I'll post when I work out how to do this, but if anyone already has I would love to hear.  

Share this post

Link to post
Share on other sites

Ok so that was relatively simple.   Simply go into includes / modules / content / header / templates / catmenu.php

line 27 you will find:
<i class="fas fa-chevron-down"></i> <?php echo TEXT_COLLAPSE_MENU; ?>

replace this with:
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>

which draws the 3 lines of the hamburger!
just need to left float this now.

Share this post

Link to post
Share on other sites

Whilst changing the categories button to a hamburger button was relatively simply, the styles are not. 

The style to edit is:    .navbar-toggle

this is linked to in style sheet    (although also present in bootstrap.css)


but you can over-ride this by creating this style in user.css if you don't want to meddle with bootstrap.min.css. 

So float to left and adjust other spacing!  


Share this post

Link to post
Share on other sites

So trying to change the font colour on this horizontal navigation menu.  I don't just want to go to inverse.  

I've tried every style I can, to see what is governing this.    navbar-default   navbar-nav  dropdown  dropdown-toggle   none work! 

See code snippet below:

     <div class="collapse navbar-collapse" id="bs-navbar-collapse">
          <ul class="nav navbar-nav">
         <li class="dropdown"><a href="#" tabindex="-1" class="dropdown-toggle" data-toggle="dropdown">Category item 1 text<span class="fas fa-caret-down"></span></a><ul class="dropdown-menu"><li><a href="http://www.yachtandski.co.uk/test2/index.php?cPath=22">


In the end I had to hack it and wrote the style color #FFFFF inline - which I hate doing! 

<li class="dropdown"><a href="#" tabindex="-1" class="dropdown-toggle" data-toggle="dropdown"  style="color:#FFFFFF">Category item 1 text


It will do for now, but can anyone shed any light on this.    What style can I change a style in the css to change the colour on the main product category titles, but leave the dropdown text in black? 

thanks all!

Share this post

Link to post
Share on other sites

The dropdown is using <a for the font color, 

a:focus, .navbar-default .navbar-nav > li > a:hover {

    color: #e62626;
    background-color: transparent;

For none hover add this to css

.navbar-default .navbar-nav > li > a {

    color: #ec1717;


will change to red!



Share this post

Link to post
Share on other sites