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.

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

Open 3 replies technicalthemetheme-vantage
rcpelton
8 years ago · Last reply by Alex S 8 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

3
  1. Alex S Staff 8 years, 9 months ago

    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. rcpelton 8 years, 9 months ago

    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. Alex S Staff 8 years, 9 months ago

    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.

Have a different question or issue?

Start New Thread