Header is misaligned, menu barely visible

First of all, your website is hidden from the public, so it’s difficult to see exactly what you’re talking about, but let me try to give some pointers.

1. My menu items in the header are almost invisible against the photo background regardless of how many different images I try. We’re a catering company so I really need to have sexy food photos up there. Is there a way to apply some sort of opaque wrapper or background just to the menu items/shopping cart to help them stand out?

Using something like this will give a glow to your menu items and make it more readable:

.main-navigation a {
	text-shadow: 0px 0px 10px black;
}

Changing the colour and the dimensions in that will also make it look different. Alternatively, you could give them a background.

2. As you can see, the menu and the shopping cart are hopelessly misaligned. In the official Storefront demo page, they’re perfectly aligned. Any idea why my page looks so ridiculous and what I can do to fix it?

A screenshot would really help for this.

3. Similarly, the PolyLang language switcher is also completely out of whack. PolyLang support was no help and my attempts to alter the CSS did not end well. I finally just switched the whole thing to a flag-only, no-text display and replaced the tiny default flags with bigger round flags. It looks better, but still pretty unprofessional.

We can’t really help with Polylang support, but if you make your site available to all people we could have a quick look.

Thanks so muh for your answer, Job. I just took down the Under Construction so you can see the whole site.

Thanks!

Thanks so much for your answer, Job. I just took down the Under Construction so you can see the whole site.

Thanks!

Hi @isaac85 – Polylang isn’t ours and I’m not sure what CSS is overriding them using the normal option so best get in touch with them.

As far as the menu items goes, this will make them look more like buttons:

.main-navigation a {
    margin: 5px; // add a bit of space around them
    padding: 15px !important; // add enough space between the text and the border of the button
    background: rgba(255,255,255, 0.9); // add a white semi-transparent background
    border-radius: 10px; // add a bit of a rounding to the corner
}

You can change the numbers or values or even delete them if you’re not happy with it.If you want more help with CSS, I’d suggest having a look here: https://www.w3schools.com/css/default.asp.

Perfect, that’s exactly what I needed, thanks so much.

I’m gonna start working on the CSS tutorial in a minute, but for now do you have any ideas about how to make the shopping cart on the right side of the header to align horizontally with the menu?

Hey @isaac85. There’s a fatal error on your site right now:

Fatal error: Maximum execution time of 30 seconds exceeded in /data/www/21099/ddstreetfood_cz/www/wp-includes/pomo/entry.php on line 62

Let us know when that’s resolved so we can have another look.

It’s back up now, not sure what that was about.

Yup.

If you change the margin-right for this selector you’ll see it change:

Link to image: https://cld.wthms.co/zq9JPA

Basically, the main navigation is too wide.

• This reply was modified 6 years, 10 months ago by Job a11n.