Home>Support>How do I change my Vantage footer menu from vertical to horizontal?

How do I change my Vantage footer menu from vertical to horizontal?

By rcpelton, 8 years ago. Last reply by Alex S, 8 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi –

I have been updating our company website and recently made a change that switched the footer menu from horizontal to vertical. I am not sure what I did so I can’t undo it. I am not a web developer by any means so the simpler the instructions the better :)

Thanks in advance!
Rebecca

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 1 month ago Alex S
    Hi, I Work Here

    Hi Rebecca,

    You can change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following CSS:

    #footer-widgets .widget.widget_nav_menu li:before, #footer-widgets .widget.widget_nav_menu li:last-of-type:after {
	content: none !important;
	margin: 0 !important;
}

#footer-widgets .widget.widget_nav_menu li:after {
	content: '' !important;
	border-right: 1px solid #aaaaaa;
	margin: 0 5px !important;
}

#colophon .widget_nav_menu .menu-item a {
	border: 0;
}

#colophon .widget_nav_menu .menu-item, #colophon .widget_nav_menu .menu-item a {
	display: inline-block;
}

#colophon .widget_nav_menu .menu {
	text-align: center;
}

    You might also need to install the SiteOrigin CSS Editor.

  2. 8 years, 1 month ago rcpelton

    Thank you so much Alex!! Worked perfectly :) One more quick question, would you be able to tell me how to have the words in the footer menu turn orange or become underlined orange when you roll over them to show they are active links. The orange is #ff6c2f.

    Thanks again,
    Rebecca

  3. 8 years, 1 month ago Alex S
    Hi, I Work Here

    Hi Rcpelton,

    Please navigate to WP AdminAppearanceCustom CSS and replace:

    #colophon .widget_nav_menu .menu-item a {
	border: 0;
}

    With:

    #colophon .widget_nav_menu .menu-item a {
	border: 0;
	color: #ff6c2f;
}

#colophon .widget_nav_menu .menu-item a:hover {
	text-decoration: underline;
}

    Adjust as desired.

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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More