osCommerce 2.3. Bootstrap Nav menu

[Rosyweb 3]

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.  

[Rosyweb 3]

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.

[Rosyweb 3]

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)

ext/bootstrap/css/bootstrap.min.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!  

[Rosyweb 3]

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!

[♥JcMagpie 1,017]

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!

Edited September 28, 2018 by JcMagpie