Jump to content

Recommended Posts

Quote

I can't find


echo '<ul class="nav navbar-nav">

That's ok, you probably have a newer release of this addon. The point is, just replace all of the navbar-nav classes you find in that file, if there are any.

 

Hey, just a minor correction to the CSS code block above. I missed that the last @media call was for min-width and placed my code above it, when it should be below it. So, here is the corrected CSS for this to work properly. Use this one instead.

/* BOF: Horizontal Menu Links Centered */
.navbar-nav-h-menu {
  margin: 7.5px -15px;
}
.navbar-nav-h-menu > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.navbar-nav-h-menu > li > .dropdown-menu {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.navbar-fixed-bottom .navbar-nav-h-menu > li > .dropdown-menu {
  margin-bottom: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.navbar-default .navbar-nav-h-menu > li > a {
  color: #777;
}
.navbar-default .navbar-nav-h-menu > li > a:hover,
.navbar-default .navbar-nav-h-menu > li > a:focus {
  color: #333;
  background-color: transparent;
}
.navbar-default .navbar-nav-h-menu > .active > a,
.navbar-default .navbar-nav-h-menu > .active > a:hover,
.navbar-default .navbar-nav-h-menu > .active > a:focus {
  color: #555;
  background-color: #e7e7e7;
}
.navbar-default .navbar-nav-h-menu > .disabled > a,
.navbar-default .navbar-nav-h-menu > .disabled > a:hover,
.navbar-default .navbar-nav-h-menu > .disabled > a:focus {
  color: #ccc;
  background-color: transparent;
}
.navbar-default .navbar-nav-h-menu > .open > a,
.navbar-default .navbar-nav-h-menu > .open > a:hover,
.navbar-default .navbar-nav-h-menu > .open > a:focus {
  color: #555;
  background-color: #e7e7e7;
}
.navbar-inverse .navbar-nav-h-menu > li > a {
  color: #9d9d9d;
}
.navbar-inverse .navbar-nav-h-menu > li > a:hover,
.navbar-inverse .navbar-nav-h-menu > li > a:focus {
  color: #fff;
  background-color: transparent;
}
.navbar-inverse .navbar-nav-h-menu > .active > a,
.navbar-inverse .navbar-nav-h-menu > .active > a:hover,
.navbar-inverse .navbar-nav-h-menu > .active > a:focus {
  color: #fff;
  background-color: #080808;
}
.navbar-inverse .navbar-nav-h-menu > .disabled > a,
.navbar-inverse .navbar-nav-h-menu > .disabled > a:hover,
.navbar-inverse .navbar-nav-h-menu > .disabled > a:focus {
  color: #444;
  background-color: transparent;
}
.navbar-inverse .navbar-nav-h-menu > .open > a,
.navbar-inverse .navbar-nav-h-menu > .open > a:hover,
.navbar-inverse .navbar-nav-h-menu > .open > a:focus {
  color: #fff;
  background-color: #080808;
}
@media (max-width: 767px) {
  .navbar-nav-h-menu .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-nav-h-menu .open .dropdown-menu > li > a,
  .navbar-nav-h-menu .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav-h-menu .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav-h-menu .open .dropdown-menu > li > a:hover,
  .navbar-nav-h-menu .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
  .navbar-default .navbar-nav-h-menu .open .dropdown-menu > li > a {
    color: #777;
  }
  .navbar-default .navbar-nav-h-menu .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav-h-menu .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: transparent;
  }
  .navbar-default .navbar-nav-h-menu .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav-h-menu .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav-h-menu .open .dropdown-menu > .active > a:focus {
    color: #555;
    background-color: #e7e7e7;
  }
  .navbar-default .navbar-nav-h-menu .open .dropdown-menu > .disabled > a,
  .navbar-default .navbar-nav-h-menu .open .dropdown-menu > .disabled > a:hover,
  .navbar-default .navbar-nav-h-menu .open .dropdown-menu > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu > .dropdown-header {
    border-color: #080808;
  }
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu .divider {
    background-color: #080808;
  }
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu > li > a {
    color: #9d9d9d;
  }
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu > li > a:focus {
    color: #fff;
    background-color: transparent;
  }
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu > .active > a,
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu > .active > a:hover,
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #080808;
  }
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu > .disabled > a,
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu > .disabled > a:hover,
  .navbar-inverse .navbar-nav-h-menu .open .dropdown-menu > .disabled > a:focus {
    color: #444;
    background-color: transparent;
  }
}
@media (min-width: 768px) {
  .navbar-nav-h-menu {
    margin: 0;
  }
  .navbar-nav-h-menu > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
/* this will center the menu links */
.navbar-nav-h-menu { width:100%; text-align:center; }
.navbar-nav-h-menu > li { float:none; display:inline-block; }
/* EOF: Horizontal Menu Links Centered */

 

Edited by Demitry

osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&amp;geo=US&amp;q=oscommerce

Share this post


Link to post
Share on other sites
19 hours ago, Kurre said:

Is it possible to center the menu instead of have it to the left ?

It should be as simple as finding the controlling class ( the first div of the menu) give it a new ID and then add css to center. As it's a menu that can change in size as dropdowns open or close you should use "margin: auto !important;"

That should center it and keep it centerd as the cat's change.

I have a centerd header menu on my test site take a look at that and see if it helps. Or post or pm a link to your as it can be cheked in browser inspector.

test site

Edited by JcMagpie

 

Share this post


Link to post
Share on other sites

I am running Phoenix. To center the navbar, I simply add mr-auto and ml-auto to the ul class as follows:

       <ul class="navbar-nav mr-auto ml-auto">

 

Edited by kgtee

Share this post


Link to post
Share on other sites

@JcMagpie Your test site for phoenix show a horizontal category menu.  Do you have that module available for the latest pheonix version 1.0.4.0?

Mike


osC BS gold live - osC CE in development (awesome)

Share this post


Link to post
Share on other sites
Quote

Now it looks like this..

this is with the adjusted CSS? ..strange, it should not be doing that. What version of osC do you have?

Edited by Demitry

osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&amp;geo=US&amp;q=oscommerce

Share this post


Link to post
Share on other sites

@Kurre

If you used the second CSS script I posted, then it should work. If it does not, then just use what did work for you that Andrea posted. I appreciate you testing it.

 


osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&amp;geo=US&amp;q=oscommerce

Share this post


Link to post
Share on other sites

@Demitry Thank you anyway.. It worked with @puggybelle code when I look in PC but in mobile view it doesn't work as it should..

I inserted this in user.css

/* this will center the menu links */
.navbar-nav2 { width:100%; text-align:center; font-size:20px; font-family:helvetica; }
.navbar-nav2 > li { float:none; display:inline-block; } 

and I changed this in catalog/includes/modules/content/header/cm_header_catmenu.php

if (empty($class)) $class = 'nav navbar-nav'; 

to

if (empty($class)) $class = 'nav navbar-nav2'; 

But then the mobile view isn't as it should. It looks and works like on PC the menu, it is in one row and submenus popup out like that.

Edited by Kurre

Share this post


Link to post
Share on other sites

@Kurre - The categories menu in my site will collapse to a vertical presentation of the categories when in mobile view. 

Is that what you're seeing?

I think that's normal behavior.  After all, if you looking at a page that has multiple categories in the header, a small mobile device can't display the categories from left to right because they simply won't fit on the screen. 

- Andrea

Share this post


Link to post
Share on other sites
Quote

But then the mobile view isn't as it should. It looks and works like on PC the menu, it is in one row and submenus popup out like that.

Make sure your Categories Menu XS is enabled. Go into your admin panel Modules>Content>Categories Menu XS and make sure it is installed and enabled.

If that is enabled and you are still seeing that desktop horizontal menu, go into the template for the catmenu and look at the code that follows this line

if (MODULE_CONTENT_HEADER_CATMENU_XS_STATUS == 'True') {

That code is what determines hiding the desktop version of the horizontal menu when the screen width is smaller than desktop.

As I mentioned before, my version is modified and I actually use some of the Navigation Bar modules in my Horizontal Menu (like Account, Cart, and Checkout). Therefore, it makes it a bit more challenging for me to test or replicate issues on my end without having a fresh install of each osC version.

 


osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&amp;geo=US&amp;q=oscommerce

Share this post


Link to post
Share on other sites

@Demitry - That's interesting because I never installed the XS folder that comes with the contribution.

I saw two folders in the download...and I just picked the BS one because...to be honest...I didn't understand what XS meant at that time.  I knew I was running a version of osCommerce that used Bootstrap, so...I only installed that folder. 

Think I might install the XS folder and its files tomorrow on my test site just to see what the difference is on my cellphone...if any?

At present, it looks like this on my cellphone:

shot1.JPG.645649a67c891a55c205a58905ff5444.JPG

When I click on the Categories menu, it collapses like this:

shot2.JPG.327c68dbdaba7de8816584f1e050106e.JPG

But...isn't that what it's supposed to do anyway?  Collapse vertically on my tiny cellphone screen?  And I never even installed the files from the XS folder.

I'll install those files tomorrow and enable the XS module just to see what happens.  Very curious about that now.

- Andrea

Share this post


Link to post
Share on other sites
Quote

That's interesting because I never installed the XS folder that comes with the contribution.

Yeah, that's strange that it works without the Extra Small (XS) module for mobile. Maybe based on the BootStrap nav class?

Though, that module is really easy to install. Are you sure you did not install that XS module?,.. because I thought that Categories button for the menu dropdown is part of it.

Mine is completely different, .. with lots of modifications. I installed it in 10/17 so its been a while.

Edited by Demitry

osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&amp;geo=US&amp;q=oscommerce

Share this post


Link to post
Share on other sites

Good Morning, @Demitry

I am so glad I thought to revisit this thread.

I never did install the XS module for this contribution.  The Categories button has always displayed on cellphones, despite never having installed the XS folder.

And when clicked, the Categories button always displayed the parent categories with arrows to indicate there are deeper categories within, so...I just assumed everything was okay.  I am not a cellphone person.  I hate cellphones, so...I thought what I was seeing was sufficient and that was the end.

Wrong.

If I clicked on an arrow next to a category (indicating there are sub-categories) - nothing would load on a cellphone.  Couldn't see the subcats at all.  It's been like that for a year and I had no idea until today.

So, I installed the XS folder and...what a difference, and it's a huge difference.  Everything is appearing beautifully, complete with a back button to go back to the parent category.  God, I wish I had realized how this works a long time ago. 

The instructions were pretty vague and just said, you can install one or the other or both.  And that's about it.  So, I installed the BS folder only.  I didn't understand the significance of the XS folder at all. 

Big mistake in a world full buyers using cellphones to shop.  Glad you pointed me in the right direction - Thanks, Demitry!

- Andrea

 

Share this post


Link to post
Share on other sites

Yeah.. @Demitry I did not install the XS modul either as @puggybelle I didn't know I should. Now it works like it should, except now the categories button in mobile view is floating over my fixed top navbar.

Thanks for all help!

Share this post


Link to post
Share on other sites
Quote

Now it works like it should, except now the categories button in mobile view is floating over my fixed top navbar. 

This is a CSS setting for that button of position:absolute;  You need to find the class that controls that Categories button and change the position setting to position:relative;

This should work, but may need another tweak depending on the div structure and other related CSS.

Edited by Demitry

osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&amp;geo=US&amp;q=oscommerce

Share this post


Link to post
Share on other sites

Hi @Demitry

I'm not seeing what @Kurre is at all.  The Categories button hovering over the navigation bar.

I wonder if he doesn't have the Hamburger button enabled in admin/modules/navbar modules

My categories button is displaying on its own, independent of any interference from other things on the screen.

However, my navbar modules now reside 'inside' that Hamburger button.  When clicked...you see all of the links to the Cart, My Account, etc.

I expect that's what I'm supposed to be seeing in mobile view?

- Andrea

Share this post


Link to post
Share on other sites
Quote

I wonder if he doesn't have the Hamburger button enabled in admin/modules/navbar modules

Because I do not use the Navigation Bar, I cannot say whether enabling the Hamburger menu button for the Navigational Bar would affect the display position of the Categories Menu button in the Horizontal Menu. I would say, that this is likely not the case.

 

Quote

However, my navbar modules now reside 'inside' that Hamburger button.  When clicked...you see all of the links to the Cart, My Account, etc.

I expect that's what I'm supposed to be seeing in mobile view? 

Again, I don't know because my modified version does not include the Navigation Bar. I have the three aforementioned modules that I imported into the Horizontal Menu from the Navigation Bar and those display in both desktop and mobile. And as long as it works, that's all that matters!

 

On a side note, always test any changes you make to your site on both desktop and mobile. I primarily use FireFox due to its security features and because it does not scrape as much of my personal info as the other browsers do (plus, its faster). However, I usually also do cross-browser testing in Chrome, MS Edge, IE, and Safari.

And, Google Chrome has a feature I often use to identify issue on a page via their More Tools > Developer Tools settings menu option. There, you can view your changes on select mobile devices as well.

I mention this here not just FYI, but for anyone reading through these posts who's making code changes or installing new features on their site.

 

Edited by Demitry

osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&amp;geo=US&amp;q=oscommerce

Share this post


Link to post
Share on other sites
10 hours ago, Demitry said:

This is a CSS setting for that button of position:absolute;  You need to find the class that controls that Categories button and change the position setting to position:relative;

This should work, but may need another tweak depending on the div structure and other related CSS.

Thanks I will do that.

Share this post


Link to post
Share on other sites
9 hours ago, puggybelle said:

Hi @Demitry

I'm not seeing what @Kurre is at all.  The Categories button hovering over the navigation bar.

I wonder if he doesn't have the Hamburger button enabled in admin/modules/navbar modules

My categories button is displaying on its own, independent of any interference from other things on the screen.

However, my navbar modules now reside 'inside' that Hamburger button.  When clicked...you see all of the links to the Cart, My Account, etc.

I expect that's what I'm supposed to be seeing in mobile view?

- Andrea

I have the hamburger button enabled.

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

×