Block Display Buttons in Main Nav

[svdpsm]

I have two buttons in my main nav now and they are input as menu items. They are displaying inline, i am hoping to display them on top of eachother, is there a way to do this?

Please take a look at the donate & volunteer buttons in the main nav at http://dev.svdpsm.org

Thanks in advance!

[Prasant]

Hello @svdpsm,

Thanks for asking.

Please note that changing the layout of navigation menus can have negative effect on the website. So any issues arising because of this will fall outside the scope of support we can offer.

Under Appearance > Menus assign class to donate and volunteer menu button. https://cl.ly/1W1y0b1a3y2P

After that add following CSS under X > Theme Options > CSS:

.custom-menu-class {
    clear: both;
    display: contents;
}

Please change the class name as per your requirement.

Thanks.

[svdpsm]

That’s not giving me the desired outcome, it’s stripping all the style i’ve given the buttons and still displaying them inline.

[nabeel]

Hi again,

Try adding the following code in your Theme Options > CSS:

button#donateBtn {
    position: absolute;
    top: 75px;
    left: 42px;
}
button#volunteerBtn {
    position: absolute;
    top: 25px;
    left: 0;
}

But it is not recommended to make such changes in the header, so any issues arising because of this will fall outside the scope of support we can offer.

Thanks!