Jump to content

Galaxy Main Menu Help


devilish

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

Link to comment
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.

Link to comment
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

Link to comment
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

 

Link to comment
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.

 

Link to comment
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
Link to comment
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

Link to comment
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...