[Resolved] a few minor css styling questions

[Melissa]

Here’s the page:
https://theslowroad.org/category/destinations/south-america/ecuador/

1. In the main menu (top) how can I align the submenu under “Where We’ve Been”?

2. I can’t seem to get a margin between the orange box and the map, despite having set a margin for the box.

3. In the email subscribe form in the footer, how can I align the input box to the center (like the heading and the button are)?

Thanks in advance!

[Tom]

Hi there,

1. Have you tried setting the Sub-menu Direction to “Left” in Customize > Layout > Primary Navigation? Or do you want it centered?

2. Try adding this CSS:

#openingtext:after {
    content: "";
    display: table;
    clear: both;
}

3. Give this CSS a shot:

.mailpoet_text {
    margin-left: auto;
    margin-right: auto;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Melissa]

1. I tried that and didn’t love the look. I’d like it centered and to fold out to the right.

2 & 3 Your fixes were perfect!

Thanks!

[Tom]

What if you do this?:

.main-navigation ul ul {
    width: auto;
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Melissa]

That stretches the submenu to the width of the top menu item, instead of taking the submenu width from the customizer and centering it.

Not what I was trying for, but it will work well enough if centering is too much of a pain!

[Tom]

Centering itself isn’t possible without javascript, I think. We could center it with CSS, but it would use specific values that would need to be changed if the parent element ever changes its width.

Let me know if you want to explore that 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Melissa]

I’ll keep it in mind. Thanks for your great help, as always!

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts