Archived topic
a few minor css styling questions
7 replies · Started by Melissa on August 14, 2019
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!
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;
}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!
What if you do this?:
.main-navigation ul ul {
width: auto;
}Let me know :)
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!
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 :)
I'll keep it in mind. Thanks for your great help, as always!
No problem :)
