[Dylan FParticipant]

Hello,
I would like to have my complete menu in the Footer Menu. Meaning it will include all of the sub-menu items below the main footer menu.

The reason for this need is that the main menu items aren’t real links, just signifiers of what section of the site you will be visiting. Thus, having the footer menu only load the top level menu items will do me no good.

Thanks for any help you are willing to give with this issue.

Dylan Fleming
Asio Studio

[John EzraMember]

Hi there,

Thanks for writing in! How would you like the menu to show up in the footer. Currently the footer space isn’t designed to have drop-down sub-menus like the main menu area. The footer however does have widget areas, where you can either use a menu widget or use a text widget and write HTML code to show each menu item as a manual link.

Depending on how complex you would like the menu to be and your level of coding skills you may or may not want to engage a developer to help you out. You could also search for a plugin that may assist you with this.

You can check out our recommended partners: https://theme.co/x/member/custom-development/

As long as it is something really simple we can assist with it, however custom development and third party plugin support is beyond our scope.

Thanks for understanding!

[Dylan FParticipant]

Sorry for not being completely clear. For an example of what I’m looking for, take a look at the footer of this website.

http://www.icpc2014.ru/en

I would like to have the footer menu be the same menu as in the header, but I would like to have the sub menu items displayed (static) below the main items in the menu. As you can see from the example, all of the main menu items are displayed in a row across the top and each of the sub-menu items are columns below their parent. If necessary, I am more than willing to hard code the menu, I am just having a difficult time with the css.

[LelyModerator]

Hello Dylan,

Thank you for the clarification.
We can achieve that using Footer Widgets. Go to Appearance > Customize > Footer > Widget Areas: Choose Four. Then go to Appearance > Customize > Widgets. On each Footer widget add Text widget then add something like this:

<h5><a href="#">TITLE HERE</a></h5>
<ul class="footerMenu">
	<li><a href="#" title="">LINK1</a></li>
	<li><a href="#" title="">LINK2</a></li>
	<li><a href="#" title="">LINK3</a></li>
	<li><a href="#" title="">LINK4</a></li>
</ul>

Do that for every footer widget. Customize the content. Add the following custom CSS:

ul.footerMenu {
    list-style: none; /*remove dot on list element*/
}
ul.footerMenu li a {
    color: #fff; /*LINK font color*/
    font-size: 15px; /*LINK font size*/
}
h5.footerMenuTitle a { /*Header*/
    font-size: 20px;
    color: red;
}

Hope this helps.

[Dylan FParticipant]

I forgot to mention that I need to use the footer widget area for another use. I have continued to work on it this morning and have made some headway.

I went online and found a website with a similar coding method that I’m looking for and designated some CSS that I loaded into the Custom CSS box in the Customizer. After that, I made a child theme and pulled in the “_nav-footer.php” file. Once there, I changed the menu_class to my new footer css that I created and set the depth to “2”. This has appeared to work, but now I am having one more issue.

My sub-menus are still pulling the “sub-menu” class. Considering this class has a background color on it, this is undesirable. Do you know how to tell the sub-menu of the footer navigation to pull a custom class for the sub-menu?

Thank you for your help,
Dylan Fleming

[Dylan FParticipant]

Nevermind, I figured it out.

I just needed to create a CSS designation for .footer-nav .sub-menu

[JoaoModerator]

Hi Dylan,

Thanks for letting us know.

Please reach us if you need help with anything else.

Joao

[Author]

Posts