Jump to content

Recommended Posts

@@dnbvinyl

 

I spent some time working with the CSS to address issues 2 and 3 above. Here's what I came up with (the last five (5) entries are my new ones):

.dropdown-submenu {
  position: relative;
}

.dropdown-menu > .dropdown > .dropdown-menu,
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px 6px;
  border-radius: 0 6px 6px 6px
}

.dropdown-menu > .dropdown > a:after,
.dropdown-submenu > a:after {
  display: inline-block;
  content: "\f0da";
  font-family: FontAwesome;
  margin-left: 10px;
  color: #cccccc;
}

.dropdown-submenu:hover > a:after {
  color: #555;
}


.navbar-nav,
.navbar-nav > a: {
  color: #333;
}

.navbar-nav > a:focus,
.navbar-nav > a:hover {
  color: #fff;
}

.dropdown-menu .navbar-nav > li,
.dropdown-menu .navbar-nav > li > a: {
  color: #333;
}

.dropdown-menu .navbar-nav > li > a:focus,
.dropdown-menu .navbar-nav > li > a:hover {
  color: black;
}

.dropdown.open .dropdown-menu > li > .navbar-nav .dropdown.open .dropdown-menu {
  top: 0;
  left: 100%;  
}

This seems to work with multiple depths of categories. Here is the result:

 

post-327952-0-30465800-1478627624_thumb.jpg

 

I'm still having layout issues and rollover color issues in the XS screen mode, and still need additional work on the CSS:

 

post-327952-0-77066800-1478627861_thumb.jpg

 

HTH

 

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

@@ArtcoInc

 

For XS menu solution, try "XS Menu" from Tsimi himself : http://forums.oscommerce.com/topic/408478-horizontal-categories-menu-bs/?p=1735261

This will give you ideas for adaptation perhaps or just a solid solution about display issue. 
 

Edited by milerwan

Osc v2.3.4 BS "custom"

Share this post


Link to post
Share on other sites

hi think my previous post might not have been very clear have attached some images of the issue i am having. As you can see for some reason my categories in the navbar doesn't have an icon next to it so when the screen size is reduced the text remains rather than switching to an icon like the other navbar icons.

 

post-329817-0-04800100-1479221277_thumb.jpgpost-329817-0-25939900-1479221299_thumb.jpgpost-329817-0-77064000-1479221299_thumb.jpg

 

anyone know what might be causing this or a fix 

 

thanks

Share this post


Link to post
Share on other sites

@@milerwan

 

 

For XS menu solution, try "XS Menu" from Tsimi himself : http://forums.oscommerce.com/topic/408478-horizontal-categories-menu-bs/?p=1735261

This will give you ideas for adaptation perhaps or just a solid solution about display issue. 
 

 

Thank you for the suggestion. This is a content / header module. I am using the categories dropdown in a navbar module. I was able to adapt Tsimi's module to a navbar module, but I was not happy with the results.

 

I have been playing with some XS specific CSS code, and have almost everything working the way I like:

@[member=media](max-width:767px) {
  .dropdown.open .dropdown-menu > li > .nav.navbar-nav {
    padding-left: 30px;
    a:focus, a:hover {
      color: #000;
    }
  }

  .dropdown.open .dropdown-menu > li > .navbar-nav .dropdown.open .dropdown-menu {
    padding-left: 20px;
  }

  .dropdown-menu .navbar-nav > li,
  .dropdown-menu .navbar-nav > li > a: {
    color: #333;
  }

  .dropdown-menu .nav.navbar-nav .dropdown a:focus,
  .dropdown-menu .nav.navbar-nav .dropdown a:hover {
    color: #fff;
  }
}

I just have some unwanted background color shifts that I am trying to track down.

 

Thanks!

 

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

@@dnbvinyl

 

This is from /included/languages/english/modules/content/navigation/cm_navbar.php

  //header titles
  define('HEADER_CART_CONTENTS', '<i class="glyphicon glyphicon-shopping-cart"></i> %s item(s) <span class="caret"></span>');
  define('HEADER_CART_NO_CONTENTS', '<i class="glyphicon glyphicon-shopping-cart"></i> 0 items');
  define('HEADER_ACCOUNT_LOGGED_OUT', '<i class="glyphicon glyphicon-user"></i><span class="hidden-sm"> My Account</span> <span class="caret"></span>');
  define('HEADER_ACCOUNT_LOGGED_IN', '<i class="glyphicon glyphicon-user"></i> %s <span class="caret"></span>');
  define('HEADER_SITE_SETTINGS', '<i class="glyphicon glyphicon-cog"></i><span class="hidden-sm"> Site Settings</span> <span class="caret"></span>');
  define('HEADER_TOGGLE_NAV', 'Toggle Navigation');
  define('HEADER_HOME', '<i class="glyphicon glyphicon-home"></i><span class="hidden-sm"> Home</span>');
  define('HEADER_WHATS_NEW', '<i class="glyphicon glyphicon-certificate"></i><span class="hidden-sm">  New Products</span>');
  define('HEADER_SPECIALS', '<i class="glyphicon glyphicon-fire"></i><span class="hidden-sm"> Special Offers</span>');
  define('HEADER_REVIEWS', '<i class="glyphicon glyphicon-comment"></i><span class="hidden-sm"> Reviews</span>');

So, where ever you are defining the label 'Categories', change it to something like

'<i class="glyphicon gliphicon-th-list"></i><span class="hidden-sm"> Categories </span>' 

HTH

 

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

@@dnbvinyl

 

This is from /included/languages/english/modules/content/navigation/cm_navbar.php

  //header titles
  define('HEADER_CART_CONTENTS', '<i class="glyphicon glyphicon-shopping-cart"></i> %s item(s) <span class="caret"></span>');
  define('HEADER_CART_NO_CONTENTS', '<i class="glyphicon glyphicon-shopping-cart"></i> 0 items');
  define('HEADER_ACCOUNT_LOGGED_OUT', '<i class="glyphicon glyphicon-user"></i><span class="hidden-sm"> My Account</span> <span class="caret"></span>');
  define('HEADER_ACCOUNT_LOGGED_IN', '<i class="glyphicon glyphicon-user"></i> %s <span class="caret"></span>');
  define('HEADER_SITE_SETTINGS', '<i class="glyphicon glyphicon-cog"></i><span class="hidden-sm"> Site Settings</span> <span class="caret"></span>');
  define('HEADER_TOGGLE_NAV', 'Toggle Navigation');
  define('HEADER_HOME', '<i class="glyphicon glyphicon-home"></i><span class="hidden-sm"> Home</span>');
  define('HEADER_WHATS_NEW', '<i class="glyphicon glyphicon-certificate"></i><span class="hidden-sm">  New Products</span>');
  define('HEADER_SPECIALS', '<i class="glyphicon glyphicon-fire"></i><span class="hidden-sm"> Special Offers</span>');
  define('HEADER_REVIEWS', '<i class="glyphicon glyphicon-comment"></i><span class="hidden-sm"> Reviews</span>');

So, where ever you are defining the label 'Categories', change it to something like

'<i class="glyphicon gliphicon-th-list"></i><span class="hidden-sm"> Categories </span>' 

HTH

 

Malcolm

Thanks for the hep Malcolm solved my issue

Share this post


Link to post
Share on other sites

@@Tsimi

Hi Lambros

 

Great addon, just found it.

 

One thing, I'll try and explain.

 

When you hover over "Categories" in nav bar there appears like a large I, how and where do you change code so as the "hand" appears on hover over Categories in nav bar.

 

Many thanks

Cheers

Grandpa

Edited by grandpaj

Share this post


Link to post
Share on other sites

@@grandpaj

 

Hi John

 

That navbar code is not mine. ArtcoInc worked on it.

But the code for the cursor in css is this

div {
    cursor:pointer;
}

So you could add cursor:pointer; somewhere in ArtcoIncs css code to get that hand icon you want.

My guess would be here

 

.navbar-nav > a:hover {

 

and/or here

 

.navbar-nav > a:hover {

Edited by Tsimi

Share this post


Link to post
Share on other sites

@@Tsimi

Hi Lambros

 

Thanks for the reply.

I can sort the CSS out but do I also have to place the following code somewhere.

 

div {
    cursor:pointer;
}

 

Many thanks

 

John

Share this post


Link to post
Share on other sites

No that was just an example code.

You only need to add

 

cursor:pointer;

 

inside the :hover class codes.

Edited by Tsimi

Share this post


Link to post
Share on other sites

@@Tsimi

Hi Lambros

 

Tried in CSS, code at the bottom, but didn't work, have been trying for a couple of days with no luck to get the pointer to change to a "hand" when hovering over Catagoreies in Navbar.. Perhaps theres some code somewhere else, so will contact Artcolnc@@ArtcoInc

.nav > li > a {
  padding-right: 15px;
  padding-left:0;
  }  
.dropdown-menu>li /* To prevent selection of text */
{   position:relative;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    cursor:pointer;
}
@[member=media] (min-width: 768px) {
.dropdown-menu {
    background-color: #fff;
    box-shadow: 8px 8px 15px 0 #666;}
.dropdown-menu .sub-menu>li>a:hover, 
.dropdown-menu >li>a:hover{
    background-color: #;   ////add your colors here
    color: #;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -opera-border-radius: 5px;
    -khtml-border-radius: 5px;
}
.dropdown-menu .sub-menu>li>a:not(:hover), 
.dropdown-menu >li>a:not(:hover){
    background-color: #fff;
    color: #000;}
.right-caret:after,.left-caret:after
 {  content:"";
    border: 5px solid transparent;
    border-top: 5px solid transparent;
    display: inline-block;
    height: 0;
    vertical-align: middle;
    width: 0;
    margin-left:10px;
}
.right-caret:after {   
    border-left: 5px solid #B70F43;
}
.left-caret:after {
    border-right: 5px solid #B70F43;
}
}
@[member=media] (max-width: 768px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #ffffff;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
    background-color: transparent;
  }
.right-caret:after,.left-caret:after
 {  content:"";
    border: 5px solid transparent;
    border-top: 5px solid transparent;
    display: inline-block;
    height: 0;
    vertical-align: middle;
    width: 0;
    margin-left:10px;
}  
.right-caret:after {   
    border-left: 5px solid #fff;
}
.left-caret:after {
    border-right: 5px solid #fff;
}
}
.dropdown-menu .sub-menu 
{
    left: 90%;
    position: absolute;
    margin-left:15px;
    top: -5px;
    display:none;
    margin-top: -1px;
    box-shadow: 8px 8px 15px 0 #666;
}
.navbar-nav > a:hover {
  color: #fff;
  cursor:pointer;
}

Share this post


Link to post
Share on other sites

Hi

 

Does anyone know how to get the drop down menu to show in 2 columns wide instead of one long continuous one.

 

I have 18 categories and at the moment on dropdown they run of the bottom of the page.

 

Any thoughts.

 

Many thanks

Grandpa

Share this post


Link to post
Share on other sites

@@ArtcoInc

Hi Malcolm

 

I am looking to incorporate your addon on an update to my site. I have 2 questions

 

1) I have 18 categories and at the moment on dropdown they run of the bottom of the page. How can I get say, 2 columns, and prevent categories from running of the page bottom

 

2)  How do you stop the "automatic dropdown" when in XS view hovereing over say, Categories or Account

 

Hope this makes sense.

 

Many thanks

Grandpa

Share this post


Link to post
Share on other sites

@@grandpaj

 

John


1) I have 18 categories and at the moment on dropdown they run of the bottom of the page. How can I get say, 2 columns, and prevent categories from running of the page bottom

 

I based my code on @@Tsimi 's code, which was based on @@GLWalker 's code

 

http://forums.oscommerce.com/topic/398284-oscommerce-23-bootstrap-nav-menu/

 

G.L. may be able to adapt this for your application ... his code is way above my understanding. :-

 

All I did was move it from being hard-coded in the header (2.3.4BS *pre-Gold*) to a navbar module, and then fight with some CSS to make it work like is used to before making it a module (I still have a couple of background color changes I don't want, but that's another problem).

 


2)  How do you stop the "automatic dropdown" when in XS view hovereing over say, Categories or Account

 

 

I don't understand what you're asking. In my testing, in XS view, you have to click on the 'hamburger' to drop down the menu options. Then, you have to *click* on 'Categories' to get the menu to expand further. Hovering over it does nothing.

 

IIRC, you were trying to change the pointer to a hand when hovering over 'Categories' et el. The funny thing is, the pointer *does* change to a hand here on my test machine ... no other changes were needed. Could you have introduced something when you tried to make the pointer change?

 

HTH

 

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

@@joe122joe

Thank you @@Tsimi for this addon .

Is it possible to put an small image for each category​ in the menu? 

Thanks

Joe

Joe,

 

Do you want the same 'image' (like an icon) for all of the categories? Or, do you want a different one for each category?

 

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

@@joe122joe

 

(thinking out loud)

 

The Categories table already has a field for a 'categories_image'. If you are willing to use this same image, you should be able to add the link to the image to the catmenu class, and use that to include the image in the menu structure. You will probably need to resize the image to fit your needs.

 

If you want to use a different image, in addition to the above, you will have to add a new field to the categories table, and modify /admin/categories.php to be able to enter and/or edit the link to your images.

 

HTH

 

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

@@ArtcoInc thank you

I know about that field for a 'categories_image'. And tried to use it I had no luck.

Using this code 

tep_image(DIR_WS_IMAGES . $category['categories_image']

not helping nothing show.

 

Joe

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×