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?
Styling Footer Custom Menu
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
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?
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
This is a private message.
This is a private message.
This is a private message.
This is a private message.
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; }This is a private message.
This is a private message.
This is a private message.
This is a private message.
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?
This is a private message.
No problem, glad to hear you’re making progress.