Jump to content
Sign in to follow this  
devilish

Galaxy Main Menu Help

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

 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

Share this post


Link to post
Share on other sites

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>.

Share this post


Link to post
Share on other sites
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

respmenu.PNG

 

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites
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 by devilish

Share this post


Link to post
Share on other sites

Try to get some assistance from the skin's publisher.

I will look at the javascript file as it is delivered to my browser.

 

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

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
Sign in to follow this  

×