aurelou 4 Posted December 16, 2016 Thank you for your answers, I really don't know why it didn't work. I viewed it on pc firefox and chrome and android. Maybe it came from my site. Maybe because I have the last Edge version. Finally I deleted this navbar and made my own changes on the native navbar to make it as I wanted. It's not good code but it works, I'll stay with it for the moment. Share this post Link to post Share on other sites
PupStar 58 Posted December 17, 2016 So if I understand well you want a button that does not contain any dropdown menu (like contact us) and that does not belong to the hamburger menu on mobile view (unlike contact us). Please try this: Module: <?php /* $Id$ osCommerce, Open Source E-Commerce Solutions http://www.oscommerce.com Copyright (c) 2016 osCommerce Released under the GNU General Public License */ class nbx_spare_parts { var $code = 'nbx_spare_parts'; var $group = 'navbar_extra_modules_buttons'; var $title; var $description; var $sort_order; var $enabled = false; function __construct() { $this->title = MODULE_NAVBAR_EXTRA_SPARE_PARTS_TITLE; $this->description = MODULE_NAVBAR_EXTRA_SPARE_PARTS_DESCRIPTION; } function getOutput() { global $oscTemplate; // ob_start(); require('includes/modules/navbar_extra_modules/templates/nbx_spare_parts.php'); $oscTemplate->addBlock($button_mobile, 'navbar_extra_modules_buttons'); $oscTemplate->addBlock($button_desktop, 'navbar_extra_modules_left'); } function isEnabled() { return $this->enabled; } function check() { return defined('MODULE_NAVBAR_EXTRA_SPARE_PARTS_STATUS'); } function install() { tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable New products Module', 'MODULE_NAVBAR_EXTRA_SPARE_PARTS_STATUS', 'True', 'Do you want to add the module to your Navbar?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())"); tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_NAVBAR_EXTRA_SPARE_PARTS_SORT_ORDER', '550', 'Sort order of display. Lowest is displayed first.', '6', '0', now())"); } function remove() { tep_db_query("delete from configuration where configuration_key in ('" . implode("', '", $this->keys()) . "')"); } function keys() { return array('MODULE_NAVBAR_EXTRA_SPARE_PARTS_STATUS', 'MODULE_NAVBAR_EXTRA_SPARE_PARTS_SORT_ORDER'); } } Template: <?php // This is the button that shows when the navbar is on a mobile view: $button_mobile ='<a type="button" id="btn-wrench" class="btn-primary navbar-toggle" href="' . tep_href_link("parts_finder.php?filterid=1") . '"> <i class="fa fa-wrench"></i> </a>'; // This is the button that shows when the navbar is on desktop view(on the left side): $button_desktop = '<li><a href="' . tep_href_link('parts_finder.php?filterid=1') . '"><i class="fa fa-wrench"></i><span class="hidden-sm"> ' . MODULE_NAVBAR_EXTRA_SPARE_PARTS_PUBLIC_TEXT . '</span></a></li>'; This example generates two different buttons with the same contents that shows in one case or another. One icon will show at the right of the logo on expanded view (and hide on mobile); The other will show between the logo and the hamburger button (only on mobile view and hide on desktop view). The position of both icons are fixed so the config part with the position (MODULE_NAVBAR_EXTRA_SPARE_PARTS_CONTENT_PLACEMENT) has been removed. @@piernas I have tried the code above but nothing shows either on desktop or mobile??? Mark Bootstrap 3 ROCKS! (or it will if I ever get my head around it lol) (and I think I have now (w00t) ) Share this post Link to post Share on other sites
piernas 125 Posted December 18, 2016 @@piernas I have tried the code above but nothing shows either on desktop or mobile??? Mark Does the other modules on that navbar show ok? Share this post Link to post Share on other sites
PupStar 58 Posted December 18, 2016 Does the other modules on that navbar show ok? @@piernas yes everything else shows ok Bootstrap 3 ROCKS! (or it will if I ever get my head around it lol) (and I think I have now (w00t) ) Share this post Link to post Share on other sites
PupStar 58 Posted December 22, 2016 @@piernas sorry to bug you at this time of year but I dont suppose you have had chance to give your code the once over have you? I have had a go but not sure why it will not display :wacko: Bootstrap 3 ROCKS! (or it will if I ever get my head around it lol) (and I think I have now (w00t) ) Share this post Link to post Share on other sites
piernas 125 Posted December 23, 2016 @@PupStar I'll try it on a clean install as soon as I can do it, this week is busy when you have a store :) 1 PupStar reacted to this Share this post Link to post Share on other sites
PupStar 58 Posted December 26, 2016 @@piernas I have solved the issue of the link/button not showing, half of the __construct function was missing :thumbsup: function __construct() { $this->title = MODULE_NAVBAR_EXTRA_SPARE_PARTS_TITLE; $this->description = MODULE_NAVBAR_EXTRA_SPARE_PARTS_DESCRIPTION; if ( defined('MODULE_NAVBAR_EXTRA_SPARE_PARTS_STATUS') ) { $this->sort_order = MODULE_NAVBAR_EXTRA_SPARE_PARTS_SORT_ORDER; $this->enabled = (MODULE_NAVBAR_EXTRA_SPARE_PARTS_STATUS == 'True'); } } 1 ArtcoInc reacted to this Bootstrap 3 ROCKS! (or it will if I ever get my head around it lol) (and I think I have now (w00t) ) Share this post Link to post Share on other sites
PupStar 58 Posted December 29, 2016 @@piernas ok I have created another button called 'Home' using the same principles applied to the spare_parts button. Now 3 issues I can not seem to solve: 1. The sort order does not stay in the same position from desktop to mobile view 2. All of the buttons are not the same height, any ideas on how to make them all the same size 3. I can not seem to see how to add some padding above the mobile buttons See attached screenshots. Thanks Mark Bootstrap 3 ROCKS! (or it will if I ever get my head around it lol) (and I think I have now (w00t) ) Share this post Link to post Share on other sites
PupStar 58 Posted January 15, 2017 @@piernas ok I have created another button called 'Home' using the same principles applied to the spare_parts button. Now 3 issues I can not seem to solve: 1. The sort order does not stay in the same position from desktop to mobile view 2. All of the buttons are not the same height, any ideas on how to make them all the same size 3. I can not seem to see how to add some padding above the mobile buttons See attached screenshots. Thanks Mark @@piernas still not resolved issue 1 and 2 above, any chance you could revisit and advise? Thanks Mark Bootstrap 3 ROCKS! (or it will if I ever get my head around it lol) (and I think I have now (w00t) ) Share this post Link to post Share on other sites
piernas 125 Posted January 15, 2017 @@PupStar the sort order may be different as in fact these are different buttons on mobile and on desktop; we're hiding one set and displaying the other. For the icon sizes it's probably because you use <button> and <a> links, you'll have to tweak the css for both displaying the same size. I'd need a copy of the modules to be more specific. Share this post Link to post Share on other sites
PupStar 58 Posted January 15, 2017 @@piernas Thanks for getting back to me. I will have a look at the code and report back Bootstrap 3 ROCKS! (or it will if I ever get my head around it lol) (and I think I have now (w00t) ) Share this post Link to post Share on other sites
piernas 125 Posted January 15, 2017 @@PupStar if you can't find it please send me the files Share this post Link to post Share on other sites
piernas 125 Posted January 16, 2017 @@piernas ok I have created another button called 'Home' using the same principles applied to the spare_parts button. Now 3 issues I can not seem to solve: 1. The sort order does not stay in the same position from desktop to mobile view 2. All of the buttons are not the same height, any ideas on how to make them all the same size 3. I can not seem to see how to add some padding above the mobile buttons See attached screenshots. Thanks Mark Hi Mark I've received the files. 1 - This must be because of the way the navbar assigns the buttons to each group. Will try to find how can be reordered. 2 - I believe this one is because some buttons are pure buttons and other are links. It can be overriden by putting fixed height on css for each element. 3- You have to apply padding to the navbar-header group that contains the buttons. Share this post Link to post Share on other sites
PupStar 58 Posted January 16, 2017 Hi Mark I've received the files. 1 - This must be because of the way the navbar assigns the buttons to each group. Will try to find how can be reordered. 2 - I believe this one is because some buttons are pure buttons and other are links. It can be overriden by putting fixed height on css for each element. 3- You have to apply padding to the navbar-header group that contains the buttons. @@piernas 2 - I believe this one is because some buttons are pure buttons and other are links. It can be overriden by putting fixed height on css for each element. OK thanks, I have now sorted the button height by adding this to user.css .button-height {height: 40px;} and only adding the class to the buttons not in the standard addon did you have any luck with the reorder issue Mark Bootstrap 3 ROCKS! (or it will if I ever get my head around it lol) (and I think I have now (w00t) ) Share this post Link to post Share on other sites
joe122joe 1 Posted March 15, 2017 @@piernas is there any way to show categories menu in the navbar extra modules Joe Share this post Link to post Share on other sites
piernas 125 Posted March 15, 2017 @@piernas is there any way to show categories menu in the navbar extra modules Joe I couln't study the way to do it yet Share this post Link to post Share on other sites
Bobber 23 Posted November 29, 2017 Awesome Contribution: https://apps.oscommerce.com/s9Kqr @piernas! I have a open question for everyone... When the Navbar is displayed in mobile and you click the Search Button... the search box appears instantly and the black background slowly moves downward behind the search bar... Is it possible for the search box to be located in the black area that moves downward and be revealed in it... like how the account information or cart information is nestled in the menu area... Share this post Link to post Share on other sites
piernas 125 Posted November 29, 2017 50 minutes ago, Bobber said: When the Navbar is displayed in mobile and you click the Search Button... the search box appears instantly and the black background slowly moves downward behind the search bar... Is it possible for the search box to be located in the black area that moves downward and be revealed in it... like how the account information or cart information is nestled in the menu area... That's the way it works for me in firefox. Maybe a browser issue? Share this post Link to post Share on other sites
Bobber 23 Posted November 30, 2017 4 minutes ago, piernas said: That's the way it works for me in firefox. Maybe a browser issue? I have tried it in Chrome ( usually my go to... ) as well as safari on my iphone... Share this post Link to post Share on other sites
Bobber 23 Posted November 30, 2017 I have attached a video of what I am talking about... When you click the search box button the search box immediately displays and the black background slowly display downward behind the search box... same when clicked to close the search box... 20171130_000322000_iOS.mp4 Share this post Link to post Share on other sites
piernas 125 Posted December 1, 2017 On 30/11/2017 at 1:07 AM, Bobber said: I have attached a video of what I am talking about... When you click the search box button the search box immediately displays and the black background slowly display downward behind the search box... same when clicked to close the search box... 20171130_000322000_iOS.mp4 I've compared the files with my current setup and there are some differences (mainly CSS and js code). Can you please test this one to see if the problem dissapears? navbar extra 1.2.zip 1 Bobber reacted to this Share this post Link to post Share on other sites
Bobber 23 Posted December 1, 2017 1 hour ago, piernas said: I've compared the files with my current setup and there are some differences (mainly CSS and js code). Can you please test this one to see if the problem dissapears? navbar extra 1.2.zip @piernas Thank You So Much For The Help!!! This Completely Fixed The Little Problem With The Search Box Drop Down Annimation... Is it possible for you to upload this update to your OsCommerce App: https://apps.oscommerce.com/s9Kqr so others can enjoy as well? You Deserve Much More Credit Than I Can Give You @piernas!!! Amazing Job My Friend :-D Share this post Link to post Share on other sites
piernas 125 Posted December 1, 2017 8 minutes ago, Bobber said: @piernas Thank You So Much For The Help!!! Is it possible for you to upload this update to your OsCommerce App: https://apps.oscommerce.com/s9Kqr so others can enjoy as well? Amazing Job My Friend :-D @Bobber Thanks for your words :) Of course I'll upload it - I vaguely remember having fixed the problem but wanted to check if everything worked fine before uploading. Share this post Link to post Share on other sites
Bobber 23 Posted December 1, 2017 (edited) For some reason the search box is no being displayed in the header under the logo after this update... in mobile display. Are you seeing that too @piernas??? Edited December 1, 2017 by Bobber Share this post Link to post Share on other sites
Bobber 23 Posted December 1, 2017 I found the source of the problem... navbar extra 1.2 > includes > modules > navbar_extra_modules > templates > nbx_search_button Working to see if I can change it so the search bar is still displayed in the header area... Share this post Link to post Share on other sites