This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Styling Footer Custom Menu

Resolved 14 replies premiumthemetheme-vantage
Lery
10 years ago · Last reply by Andrew Misplon 10 years ago

In the Widget section, footer area, I added the Custom Menu widget. I chose to display the site navigation for the menu. This works great but displays in the footer section as a vertical list. I would like to change this to horizontal. Usually I do this with CSS using display: inline;. I can’t find the right place to add this. Any ideas?

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

14
  1. Lery 10 years, 10 months ago

    I did the following area:
    #secondary .widget ul, #footer-widgets .widget ul, #secondary .widget ol, #footer-widgets .widget ol

    but I have to use display:inline-flex; and it styles it without any padding. Adding padding doesn’t work because it’s doing that from some other element. At least that is what I think.

    Is there an easy way to find the elements to style over inspecting the element and trying to find it that way?

  2. Daniel Staff 10 years, 10 months ago

    Hi Lery

    Using Inspect Element is the best and fastest method you could use to ping an element.

    Do you have a public URL where we can take a look at this? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

    Looking forward to hearing from you

  3. Lery Private 10 years, 10 months ago

    This is a private message.

  4. Lery Private 10 years, 10 months ago

    This is a private message.

  5. Daniel Private Staff 10 years, 10 months ago

    This is a private message.

  6. Lery Private 10 years, 10 months ago

    This is a private message.

  7. Andrew Misplon Staff 10 years, 10 months ago

    Hi Lery

    Here is a custom CSS solution for a horizontal footer custom menu widget:

    /* Vantage Horizontal Footer Menu */
#footer-widgets .widget.widget_nav_menu ul {
text-align: center;
}
#footer-widgets .widget.widget_nav_menu li {
display: inline-block;
float: none;
margin-right: 16px;
}
#footer-widgets .widget.widget_nav_menu li:before {
content: "\0007C";
font-family: FontAwesome;
margin-right: 16px;
}
#footer-widgets .widget.widget_nav_menu li:first-of-type:before {
content: none;
margin-right: 0;
}
#footer-widgets .widget.widget_nav_menu li:last-of-type {
margin-right: 0;
}

    The custom menu widget must be the first widget added.

    It’s not possible to make the footer sticky within the current theme setup. You can however set a min-height for the content container, here is the snippet for that. Adjust as required:

    /* Main Container */
#main {
	min-height: 500px;
}

    The footer itself has a small amount of padding adding, you can adjust that with:

    /* Footer Padding */
#colophon {
margin-bottom: 20px !important;
padding: 30px !important;
}
  8. Lery Private 10 years, 10 months ago

    This is a private message.

  9. Lery Private 10 years, 10 months ago

    This is a private message.

  10. Lery Private 10 years, 10 months ago

    This is a private message.

  11. Lery Private 10 years, 10 months ago

    This is a private message.

  12. Andrew Misplon Staff 10 years, 10 months ago

    Hi :) Thanks for the feedback.

    Ok so, footer height first. How the Vantage footer works is it fills whatever space is left on the page. The idea with the #main min-height selector is by adding a min-height to the content area, you will never land up with a huge footer. Because, well, the only time you land up with a big footer is on a page with a tiny amount of content. Hopefully that makes sense.

    Thanks for the feedback on the footer menu. I’ve added an extra line. You should now be able to add other widgets and they should hopefully fall below the menu. Let me know how it goes once you’ve tested:

    /* Vantage Horizontal Footer Menu */
#footer-widgets .widget.widget_nav_menu {
width: 100%;
}
#footer-widgets .widget.widget_nav_menu ul {
text-align: center;
}
#footer-widgets .widget.widget_nav_menu li {
display: inline-block;
float: none;
margin-right: 16px;
}
#footer-widgets .widget.widget_nav_menu li:before {
content: "007C";
font-family: FontAwesome;
margin-right: 16px;
}
#footer-widgets .widget.widget_nav_menu li:first-of-type:before {
content: none;
margin-right: 0;
}
#footer-widgets .widget.widget_nav_menu li:last-of-type {
margin-right: 0;
}

    The orange footer looks the same on the two pages you sent through. Did you make progress on that?

  13. Lery Private 10 years, 10 months ago

    This is a private message.

  14. Andrew Misplon Staff 10 years, 10 months ago

    No problem, glad to hear you’re making progress.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread