Center Navigation Dropdown Button

Support
#1

Hi,

I’d like to center the navigation dropdown on my pages under my title. The nav dropdown is not part of the site navbar.

Thank you,

Kenya

#2

where is your URL?

#3

I just attached it

#4

Hi Kenya,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your email. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks

#5

I’d like to create a sub menu under the title. Right now the button on the site is circular, but if it’s easier, full width rectangular is fine.

For example, how the Nav bar is full width on the Themeco site, I’d like that for my sub menu (only on a couple pages), and I’d like the button to be center of the page underneath the title.

Hopefully this makes more sense.

Thank you for your help!

#6

Hello There,

Do you want something like this?

If that is the case, please make use of this code:

@media(max-width: 1024px){
    .x-brand {
        float: none;
        text-align: center;
    }

    .masthead-inline .x-btn-navbar {
        display: block;
        float: none;
        text-align: center;
        background-color: #e5e5e5;
        padding: 4px;
        border-radius: 5px;
    }
}

Hope this helps. Kindly let us know.

#7

Like that except for a secondary nav bar that will only be on a few pages. The main bar will also be on the page.

I have a secondary menu with the ‘Programs’ listed and I used the Nav dropdown option in Cornerstone, which is the circle on the image below. I want to see if I can center the button under the title or make it a full-width rectangle centered underneath the title, whichever is easier.

#8

Hello There,

To resolve your issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-mod-container .x-anchor-toggle {
    margin-left: auto;
    margin-right: auto;
}

Please let us know how it goes.

#9

It worked! Thank you!

How do I make the drop down appear below the button? It kind of disappears up into the nav bar

#10

Hello There,

Please include this code as well to positioned the navigation.

.x-mod-container {
    position: relative;
    z-index: 10;
}

.x-mod-container .x-dropdown {
    margin-left: -112px;
    top: 110%;
    left: 50%;
    z-index: 100000000;
    bottom: auto;
}

Hope this helps.

#11

That worked, thank you!

Lastly, the menu is kind of behind the body text, and un-clickable. How do I fix that?

#12

Hi there,

Kindly add the CSS code below to Pro > Launch > Theme Options > CSS:

.x-mod-container .x-dropdown {
    z-index: 999;
}

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.