Home>Support>Add second menu with vantage theme

Add second menu with vantage theme

Hi – I see there have been a few posts on this issue, but to my knowledge, no solution follow up from SO afterwards :(

I am putting together a first WP website (charity sector) using the vantage theme – I have made several changes to the CSS to modify a few things, but I have the same basic question as other posters before me – how can I add a second menu ()anywhere I want) on pages within the site (pref using the Site Builder system)? I certainly would like one small horizontal menu (not full width) on the footer, or just above, but I have other second menu uses too, one being in the middle of the home page.

I see that one poster was advised to add a menu widget to the footer but that this shows as vertical, and despite your suggested CSS changes, it remained vertical :()

Any suggestions please? I dont want to change from my vantage theme because all the customisation changes I have made will (I assume?) be lost then.

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

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

    Hi David,

    Can you please link to the thread you previously followed? Please, follow it again and then can you please send me a link to your websites so I can see why the resulting CSS isn’t working for you? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

  2. 7 years, 7 months ago David Farndale

    Hi Alex S

    Just as I have posted another question on this support forum, I see that you replied to an earlier one! Don’t know why I wasn’t alerted by email, but its my fault for not checking earlier! Re your request for me to link to the thread I previously followed, as a rookie to forums and threads etc, it would be helpful to talk in layman’s terms ;-) I’m not 100% sure what you mean! I wasn’t following just one thread – I just searched for my problem and several posts came up on different threads!!

    My site (still very much being developed – and very amateur looking) is http://www.charityknowhow.co.uk but I haven’t left the problem showing on the site for you to see what I mean. Basically it seems that the Vantage theme (free version) footer is very limited in what it will allow using the site builder option.

    I simply wanted to add a horizontal menu element to a section of the footer with links to some of my key pages – in addition to the default horizontal sticky menu I have above the metaslider banner.

    Regards
    David

  3. 7 years, 7 months ago Alex S
    Hi, I Work Here

    Hi David,

    To clarify, the Vantage theme, regardless of standalone or premium, is exactly the same.
    I’m not too sure why you didn’t receive my previous reply, but please disregard it. Let’s start over.

    Please add a custom menu widget to your footer layout builder and set it to display your desired menu. Once you’ve done that, please navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. 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 #db912f;
    	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;
    }
    

    How does that look?

    You might also need to install the SiteOrigin CSS Editor.

  4. 7 years, 7 months ago David Farndale

    Thanks Alex

    Actually I did manage to get the footer url links working OK just before your reply – I just created the html code for all the other page hypertext
    URLs in a web editor and then pasted that lot into the page builder custom menu footer section and it seemed to honour all that and looks fine.

    I have since added the extra CSS code as you suggested and that hasn't changed anything for better or worse :)

    I am having similar issues with a custom menu masthead – for example any text I add doesn't get formatted to any tags I set (e.g. <H2> etc); the alignment of my accurax social media widget is odd too; and when viewing the page in either vertical iPad mode or iPhone vertical mode it does very strange things with the alignment of everything :( Do you have a CSS fix for this too?

    Thanks for helping me…Im just glad I havnt advertised the site yet, still lots more to do and tidy up – looks a bit amateur-ish!

  5. 7 years, 7 months ago David Farndale

    Hi Alex

    Not chasing but did you see my embedded question in my previous post?

    “I am having similar issues with a custom menu masthead – for example any text I add doesn’t get formatted to any tags I set (e.g.

    etc); the alignment of my accurax social media widget is odd too; and when viewing the page in either vertical iPad mode or iPhone vertical mode it does very strange things with the alignment of everything :( Do you have a CSS fix for this too?”

    When you get a chance to reply I would be grateful :)

    Cheers

  6. 7 years, 6 months ago David Farndale

    Hi Alex…are you able to answer my query in my last post…please, please :)
    I know this is not a paid support service, and only limited hours in a day!

  7. 7 years, 6 months ago Alex S
    Hi, I Work Here

    Hi David,

    Oh. Sorry, I somehow end of getting subscribed to this thread. Sorry about that!

    We don’t currently apply a font-size for h2 in the header and instead rely on the default sizing. You can apply a font-size with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Add 9and adjust) the following CSS.

    #masthead.site-header h2 {
    	font-size: 19px;
    }
    

    You might also need to install the SiteOrigin CSS Editor.

    According to your markup, the alignment of the social icons on mobile makes sense as, based on the markup, it’s set to align to the right. I would recommend taking a look over your widget settings.

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