devilish Posted November 4, 2017 Share Posted November 4, 2017 Hi all, Could someone please help me sort this menu out or point me in the right direction. I'm using the Galaxy theme, I've moved the doc's menu from the top of the theme to the footer, with no issues. The trouble I'm having now is that I want to have the categories as the top main menu. If you take a look a the website https://wickedstuff.co.nz/ you can see what I mean. I don't know which file/files I need to edit to render a normal menu style. here's the code I change to achieve where the themes at now. </div><!-- Header : End --> <div class="grid"> <div class="col-1-1"> <div class="content"> {include file='templates/box.navigation.php'} </div> </div> </div> <div class="grid"> <div class="col-1-1"> <div class="content main"> <div class="col-9-12"> <div class="content main-body"> {include file='templates/box.errors.php'} {include file='templates/box.progress.php'} {$PAGE_CONTENT} </div> </div> <div class="col-3-12"> <div class="content sidebar"> {include file='templates/box.featured.php'} {include file='templates/box.popular.php'} {include file='templates/box.sale_items.php'} {include file='templates/box.language.php'} {include file='templates/box.skins.php'} </div> </div> <div class="clear"></div> </div> <div class="col-1-1 footer"> <!-- The Docs content moved to here. --> <!-- <div class="grid"> <div class="col-1-1"> --> <div class="content"> {include file='templates/box.documents.php'} </div> <!-- </div> </div> --> <div class="content"> <div class="col-6-12"> {include file='templates/box.newsletter.php'} </div> <div class="col-6-12"> {$SOCIAL_LIST} </div> <div class="clear"></div> </div> </div> </div> <div class="copyright"> any help would be very much appreciated. Cheers Peter Quote Link to comment Share on other sites More sharing options...
bsmither Posted November 4, 2017 Share Posted November 4, 2017 In main.php, find: <div class="grid"> <div class="col-1-1"> <div class="content"> {include file='templates/box.navigation.php'} </div> Change to: <div class="grid"> <div class="col-1-1 footer"> <div class="content"> {include file='templates/box.navigation.php'} </div> In box.navigation.php, find: <div class="panel navigation"> <ul> Change to: <div id="box-navigation"> <ul class="main-menu"> This should get you mostly to where I think you want to be. Quote Link to comment Share on other sites More sharing options...
devilish Posted November 4, 2017 Author Share Posted November 4, 2017 That work great thank you. just one more thing how would I go about removing ...Shop By Category Your help has been much appreciated Cheers 1 hour ago, bsmither said: In main.php, find: <div class="grid"> <div class="col-1-1"> <div class="content"> {include file='templates/box.navigation.php'} </div> Change to: <div class="grid"> <div class="col-1-1 footer"> <div class="content"> {include file='templates/box.navigation.php'} </div> In box.navigation.php, find: <div class="panel navigation"> <ul> Change to: <div id="box-navigation"> <ul class="main-menu"> This should get you mostly to where I think you want to be. That work great thank you. just one more thing how would I go about removing ...Shop By Category Your help has been much appreciated Cheers Quote Link to comment Share on other sites More sharing options...
bsmither Posted November 4, 2017 Share Posted November 4, 2017 In box.navigation.php, find: <h3><i class="fa fa-ellipsis-h"></i> {$LANG.something.something}</h3> <div id="box-navigation"> Delete the entire line that has <h3>. Quote Link to comment Share on other sites More sharing options...
devilish Posted November 4, 2017 Author Share Posted November 4, 2017 2 hours ago, bsmither said: In box.navigation.php, find: <h3><i class="fa fa-ellipsis-h"></i> {$LANG.something.something}</h3> <div id="box-navigation"> Delete the entire line that has <h3>. that did the trick thanks. I'll have to donate a beer or coffee for being so helpful. To be a real pain, is there a work around to remove doc's from the drop down menu and have the categories showing instead? this menu is responsive and show when using a Iphone Samsung phones. in the image you see the categories loading up behind documents. Responsive menu photo below Quote Link to comment Share on other sites More sharing options...
bsmither Posted November 4, 2017 Share Posted November 4, 2017 So, it seems the main-menu class is being targeted by javascript - when the hamburger/menu icon is clicked - to slide into position. However, having copied the div structure from the navigation code so that the documents code looks the same, means there is that same div structure: <div id="box-navigation"> <ul class="main-menu"> and <div id="box-documents"> <nav> <ul class="main-menu"> Thus, two panels slide into view. What needs to be done is three things: 1. Make it clear to the javascript that the hamburger will slide $('#box-navigation .main-menu') into view, 2. Copy the javascript routine so that a different icon will slide $('#box-documents .main-menu') into view, 3. Add a similar looking button below <div id="box-newsletter"> so that it is the trigger to slide the docs menu into view. I do not have a copy of GalaxyX, so I do not know how much I can help. Quote Link to comment Share on other sites More sharing options...
devilish Posted November 4, 2017 Author Share Posted November 4, 2017 (edited) 2 hours ago, bsmither said: So, it seems the main-menu class is being targeted by javascript - when the hamburger/menu icon is clicked - to slide into position. However, having copied the div structure from the navigation code so that the documents code looks the same, means there is that same div structure: <div id="box-navigation"> <ul class="main-menu"> and <div id="box-documents"> <nav> <ul class="main-menu"> Thus, two panels slide into view. What needs to be done is three things: 1. Make it clear to the javascript that the hamburger will slide $('#box-navigation .main-menu') into view, 2. Copy the javascript routine so that a different icon will slide $('#box-documents .main-menu') into view, 3. Add a similar looking button below <div id="box-newsletter"> so that it is the trigger to slide the docs menu into view. I do not have a copy of GalaxyX, so I do not know how much I can help. Thank for all your help, I looked at the javascript file and I'm at a complete lost. I've uploaded a copy of the my current galaxyx theme with all the mod's so far, deleted it after you have a look at the files. once again your help is really appreciated. Edited November 4, 2017 by devilish Quote Link to comment Share on other sites More sharing options...
bsmither Posted November 4, 2017 Share Posted November 4, 2017 Try to get some assistance from the skin's publisher. I will look at the javascript file as it is delivered to my browser. Quote Link to comment Share on other sites More sharing options...
devilish Posted November 4, 2017 Author Share Posted November 4, 2017 37 minutes ago, bsmither said: Try to get some assistance from the skin's publisher. I will look at the javascript file as it is delivered to my browser. I'll try, there's quite a waiting time for skin's publisher to reply thanks Quote Link to comment Share on other sites More sharing options...
bsmither Posted November 5, 2017 Share Posted November 5, 2017 From working the code in my browser, here are some edits. I do not know exactly what template each of these segments are in, so if you need help with that, maybe I can offer some guidance. Find: <div class="col-6-12"> <class="element-social"> <img src="https://wickedstuff.co.nz/bvm.png" style="float: right;"> </class="element-social"></div> Change to: <div class="col-6-12"> <div class="element-social"> <img style="float: right;" src="WickedStuff_files/bvm.png"> </div> </div> Find: </form> <div id="validate_email" class="hide">Please enter a valid email address.</div> <div id="validate_already_subscribed" class="hide">Email address already subscribed.</div> Add AFTER: <div><button class="button postfix documents-menu-trigger"><a href="#1">Legal Stuff</a></button></div> In main.js, find these 16 lines (the 17th line looks exactly like the 16th line, so pay attention!): //open/close primary navigation $('.main-menu-trigger').on('click', function(){ $('.cd-menu-icon').toggleClass('is-clicked'); $('.mobile-nav').toggleClass('menu-is-open'); //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden if( $('.main-menu').hasClass('is-visible') ) { $('.main-menu').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ $('body').removeClass('overflow-hidden'); }); } else { $('.main-menu').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ $('body').addClass('overflow-hidden'); }); } }); Replace that with: //open/close primary navigation $('.main-menu-trigger').on('click', function(){ $('.main-menu-trigger .cd-menu-icon').toggleClass('is-clicked'); $('.main-menu-trigger .mobile-nav').toggleClass('menu-is-open'); //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden if( $('#box-navigation .main-menu').hasClass('is-visible') ) { $('#box-navigation .main-menu').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ $('body').removeClass('overflow-hidden'); }); } else { $('#box-navigation .main-menu').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ $('body').addClass('overflow-hidden'); }); } }); //open/close document navigation $('.documents-menu-trigger').on('click', function(){ console.debug("Doc trigger clicked"); $('.documents-menu-trigger .cd-menu-icon').toggleClass('is-clicked'); $('.documents-menu-trigger .mobile-nav').toggleClass('menu-is-open'); //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden if( $('#box-documents .main-menu').hasClass('is-visible') ) { $('#box-documents .main-menu').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ $('body').removeClass('overflow-hidden'); }); } else { $('#box-documents .main-menu').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ $('body').addClass('overflow-hidden'); }); } }); The remaining problem is that when the list of documents (Legal Stuff) slide into view, there is no mechanism to clear it off the screen. The list of categories (Navigation) has the X at the upper right, but this is a fancy-shmancy effect derived from the hamburger icon. Since there isn't one for the Docs list, there is nothing to click to clear it. Also, when the Docs list has slid into view, the hamburger icon is still "hot". That is, with the Docs list overlaying the page, you can (maybe) scroll the page to the top, and still be able to click on that icon. Doing so slides the Navigation list into view - behind the Docs list. This is as much as I can do. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.