Footer menu

Support Area Forums Moonrise Footer menu

This topic contains 10 replies, has 2 voices, and was last updated by  Bill Robbins 2 years, 4 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
URL to the page in question: http://www.scanpan.co.jp/
  • Author
    Posts
  • #31332

    shintaro adachi
    Participant

    Dear Bill,

    I would like to add menu in footer.

    I know I can do it from theme > menu.
    But The text come out on the website in one word and does not look nice.

    If I could add 15 links in three columm, that would be very happy.

    Do you know how to do it??

    Best regards,
    Shintaro

    #31341

    Bill Robbins
    Moderator

    Good Morning Shintaro,

    Excellent question there. The footer menu was originally designed for social icons. It can be changed to work in three columns though. To do that, I would add in a widget area to the footer. Then create three separate menus; one for each column. Then add three Custom Menu Widgets to the new footer widget area and select your new menus for them. That should give you three columns of links in the footer.

    Here are the changes you’ll need to make:

    1. Go to the Appearance section in your WordPress dashboard and choose Edit.
    2. From the list of files on your right, choose functions.php
    3. Scroll down to the very bottom and add this:


      (Copy all code directly from the support site and not the notification email.)

      and save your changes. That will create the new widget area in the admin for you.

    4. Next edit the footer.php file. Replace all the code there with this:

      and save your changes.

    5. Lastly go to the Theme Options page and select the Advanced tab. Scroll down to the Custom CSS box and add this:
      
      footer#site {
      	display: block;
      	
      }
      
      footer#site ul {
      	list-style-type: none;
      }
      
      .footer-left {
      	display: inline-block;
      }
      
      .footer-right {
      	display: inline-block;
      	float: right;
      }
      
      .footer-right .widget {
      	width: 120px;
      	display: inline-block;
      	margin-left: 15px;
      }
      
    6. Update your settings.

    That should let you add in widgets to your footer now. You can use them to create three columns of links by using three of the custom menu widgets.

    You can also make these changes in a child theme which will be helpful with future theme updates.

    If you have any questions or trouble, let me know.

    Thanks,
    Bill

    #31374

    shintaro adachi
    Participant

    Dear Bill,

    Thank you very much. I could do it!

    #31375

    shintaro adachi
    Participant

    Dear Bill,

    Actually I could not do it well.

    It does not look good in my website.

    Which part did I make mistake?

    Please help me…

    #31379

    Bill Robbins
    Moderator

    Hello Shintaro,

    Sorry for the trouble there. I took a look this morning. I’ve attached a screenshot of what I’m seeing in your footer now. It looks like what I had in mind here. Are you looking for something else? Let me know and we’ll go from there.

    Thanks,
    Bill

    #31435

    shintaro adachi
    Participant

    Dear Bill.

    Yes I want my menu above the copy right and company information.
    which is left side of the picture you attached, right side links are my menu.

    I want menu full widhth in the page.

    Could you help me?

    Shintaro

    #31438

    Bill Robbins
    Moderator

    We can do that. We’ll need to edit the footer.php file again to move the widgets so they can be above the company information. Replace all the content in the footer.php file with this:

    You’ll also need to add some CSS to the Custom CSS in the Theme Options so that the widgets line up like they should.

    
    #footer-widgets {
    	margin-bottom: 30px;
    }
    
    #footer-widgets .widget {
    	width: 32%;
    	margin-left: 0;
    	margin-right: 2%;
    	float: left;
    }
    
    #footer-widgets .widget:last-of-type {
    	margin-right: 0 !important;
    }
    
    @media only screen and (max-width: 767px) {
    
    	#footer-widgets .widget {
    		width: 100%;
    		margin-right: 0;
    		float: none;
    	}
    
    }
    

    See how that works out for you now. Let me know if you have any trouble.

    Bill

    #31443

    shintaro adachi
    Participant

    Dear Bill,

    Thank you.

    I could do it.

    but one more thing could I ask?

    I use widget now. if I try to use short code to make three block like now,
    it shows up squeezed to the left only.

    I may want to try four blocks in the future.
    Could you help me too??

    THank you,
    Shintaro

    #31447

    Bill Robbins
    Moderator

    Good Morning Shintaro,

    I believe I understand what you mean. I created this widget area to have three columns of widgets. If you’d rather add the columns inside of a single widget, you can. Replace that last CSS that I sent over with this:

    
    #footer-widgets {
    	margin-bottom: 30px;
    }
    
    #footer-widgets .widget {
    	width: 100%;
    	margin-left: 0;
    	margin-right: 0;
    	float: none;
    }
    

    That should give you a widget that spans the full width of the footer. You can then add columns inside that widget if you’d like to.

    Let me know if you have any trouble.

    Thanks,
    Bill

    #31455

    shintaro adachi
    Participant

    Dear Bill,

    This is perfect.
    Thank you!
    Shintaro

    #31456

    Bill Robbins
    Moderator

    That’s wonderful. Let me know if you need anything else.

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Footer menu’ is closed to new replies.