[Resolved] Header Widget Button Not Aligning With Primary Menu

[Max]

Hello,

I am trying to add a button to my header in widgets but it is not aligning next to my primary navigation; instead, is above it. I just built a website 2 weeks ago where I did this successfully on ( https://orthodontist-kennesaw.com/ ) but after checking all of the settings, CSS and HTML codes they are being called out exactly the same.

Can you please assist me in getting this aligned next to my primary navigation? I feel like there has to be something that I am missing since I got it correct on my last website.

Thank you

[Leo]

Hi there,

I’d say this is the better method:
https://docs.generatepress.com/article/adding-buttons-navigation/

Let me know if this helps 🙂

[Max]

Hi Leo,

The code did not work from that link in either of the areas I tried. Is there a way to fix this how I am already calling it out? It works perfectly on a different website which is why I know it works and why I want to use this route instead of only CSS. Please feel free to login via the credentials I provided and poke around if needed, this is just a staging website.

Thank you

[Ying]

Hi Max,

Have you done the first step in that link?

1. Add a custom class to your menu item, for example nav-button

[Max]

Hi Ying,

So yes that did work but it is not how I want it to look at all and it is also not aligning correctly either. I really do not want to go this route for the button to be called out. I am looking for a solution to fix how it is being called out currently in the widgets with the alignment correct.

Are you able to just give me CSS code to align my current button that is already being called out through a widget? This seems to be an issue with GP because I am not having this issue on the other website I built where it is being called out exactly the same. Please see this website for example of how it should be calling out: https://orthodontist-kennesaw.com/

I really do not want to go the route of having to add it in my menu with code and editing the code to match how the button should look/perform when having it in my header through a widget worked on a website I built 2 weeks ago and should be working now.

Thanks, please let me know if you have any questions.

[Max]

Hi,

Any update on CSS that can fix the widget alignment?

Thanks

[Ying]

Try this CSS:

.inside-header {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: space-between;
    flex-wrap: wrap;
}

.header-widget {
    order: 10;
    display: block;
    float: none;
    max-width: unset;
    top: 0 !important;
}

.header-widget aside#block-10 {
    padding-bottom: 0;
}

.header-widget .wp-block-button.is-style-fill {
    margin-bottom: 0;
}
@media (max-width: 768px) {
.header-widget {
    width:100%;
}
}

[Max]

Hi Ying,

Thank you SO much! That was exactly what I needed. Appreciate your prompt assistance.

Have a wonderful Holiday!

[Ying]

You are welcome!

You too 🙂 Happy holiday!

[Author]

Posts