musashi79uk Posted April 22, 2018 Share Posted April 22, 2018 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 More sharing options...
♥raiwa Posted April 22, 2018 Share Posted April 22, 2018 use tep_image function About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
musashi79uk Posted April 22, 2018 Author Share Posted April 22, 2018 3 minutes ago, raiwa said: use tep_image function Where? Link to comment Share on other sites More sharing options...
♥raiwa Posted April 22, 2018 Share Posted April 22, 2018 instead of: <img alt="Brand" src="..."> About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
musashi79uk Posted April 22, 2018 Author Share Posted April 22, 2018 Cheers. I'll give it a go when I finish work tomorrow. Link to comment Share on other sites More sharing options...
BrockleyJohn Posted April 22, 2018 Share Posted April 22, 2018 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 More sharing options...
musashi79uk Posted April 23, 2018 Author Share Posted April 23, 2018 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 More sharing options...
BrockleyJohn Posted April 23, 2018 Share Posted April 23, 2018 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 More sharing options...
musashi79uk Posted April 23, 2018 Author Share Posted April 23, 2018 I tried both methods. Changing the user.css made no difference. Removing the height and changing the width to 150px made just a white screen display. Link to comment Share on other sites More sharing options...
BrockleyJohn Posted April 24, 2018 Share Posted April 24, 2018 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 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 More sharing options...
musashi79uk Posted April 24, 2018 Author Share Posted April 24, 2018 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 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 More sharing options...
musashi79uk Posted April 24, 2018 Author Share Posted April 24, 2018 One more thing, where is the line that controls the background colour of the navbar? I'd like to change it to pure black. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.