Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Recommended Posts

How can I use a logo image as a brand in the navigation bar?

I've changed one of the files \includes\languages\english\modules\navbar_modules\nb_brand.php where it says

<a class="navbar-brand" href="' . tep_href_link('index.php') . '">' . STORE_NAME . '</a>

to

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

I've updated that to include the correct image file and alt text. The image displays but its too big, both on the desktop site and the mobile site.

Is there a way to get it to automatically resize the image to fit the space available?

Also, how can I add category links to the Hamburger links in the NavBar? I've managed to install Alternative NavBar With Extra Buttons as I wanted the Search icon, Cart icon and Hamburger icon as the stock NavBar didn't give me the option to have the Search icon. Having those icons has made the Hamburger icon empty but would be perfect to use for the categories and links, etc.

Link to comment
Share on other sites

Link to comment
Share on other sites

Rainer is right; one of the things the tep_image function does is to add the class img-responsive which makes it fit.

All you actually need to do with the edit in language file for the navbar module nb_brand.php is this:

   define('MODULE_NAVBAR_BRAND_PUBLIC_TEXT', '<a class="navbar-brand" href="' . tep_href_link('index.php') . '">' . tep_image('images/' . STORE_LOGO, htmlspecialchars(STORE_NAME)) . '</a>');

The standard navbar is modular and it's easy enough to make extra modules to fit in. This one might be a good starting point but it was built for a modular navbar addon rather than the current navbar, so it might need a little tweaking to get it right:

https://apps.oscommerce.com/2wdDj

Contact me for work on updating existing stores - whether to Phoenix or the new osC when it's released.

Looking for a payment or shipping module? Maybe I've already done it.

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Link to comment
Share on other sites

20 hours ago, BrockleyJohn said:

Rainer is right; one of the things the tep_image function does is to add the class img-responsive which makes it fit.

All you actually need to do with the edit in language file for the navbar module nb_brand.php is this:


   define('MODULE_NAVBAR_BRAND_PUBLIC_TEXT', '<a class="navbar-brand" href="' . tep_href_link('index.php') . '">' . tep_image('images/' . STORE_LOGO, htmlspecialchars(STORE_NAME)) . '</a>');

The standard navbar is modular and it's easy enough to make extra modules to fit in. This one might be a good starting point but it was built for a modular navbar addon rather than the current navbar, so it might need a little tweaking to get it right:

https://apps.oscommerce.com/2wdDj

I've done as you've said but its not resizing the image to fit. My website is http://www.vengeancemag.co.uk/store/

 

Link to comment
Share on other sites

22 minutes ago, musashi79uk said:

I've done as you've said but its not resizing the image to fit. My website is http://www.vengeancemag.co.uk/store/

 

Go to admin > configuration > images and set Calculate Image Size to false.

Also you'll probably need to add a rule to your user.css to pull it up a bit, eg

.navbar-brand img {
  margin-top: -14px;
}

 

Contact me for work on updating existing stores - whether to Phoenix or the new osC when it's released.

Looking for a payment or shipping module? Maybe I've already done it.

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Link to comment
Share on other sites

in your user.css you need:

.navbar-brand > img {
	max-height: 100%;
}

This forces it inside the height of the container but it will be tiny because of the padding, so also add

.navbar-brand {
	padding: 0 15px;
}

attached is an image 300 x 100 scaled into the navbar

Screenshot-2018-4-24 BS Final.png

Contact me for work on updating existing stores - whether to Phoenix or the new osC when it's released.

Looking for a payment or shipping module? Maybe I've already done it.

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Link to comment
Share on other sites

5 hours ago, BrockleyJohn said:

in your user.css you need:


.navbar-brand > img {
	max-height: 100%;
}

This forces it inside the height of the container but it will be tiny because of the padding, so also add


.navbar-brand {
	padding: 0 15px;
}

attached is an image 300 x 100 scaled into the navbar

Screenshot-2018-4-24 BS Final.png

This worked perfect . I also included

.navbar-brand img {
  margin-top: 5px;
 }

into the user.css as you suggested earlier, changing the value to -14 to 5. That aligned it up perfectly.

Is it possible to make the desktop site display the extra icons (I have search and cart icons) in the navbar like the mobile site?

Also, is there any information about integrating the categories into the hamburger dropdown menu? I have the add on which I have followed the instructions and uploaded to the site but as it was made for a different bar, I can't see how to integrate it.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...