Support » Theme: Storefront » Header is misaligned, menu barely visible

  • Resolved isaac85

    (@isaac85)


    Guys, I’m having lots of trouble getting the header on my new site to look like it was designed by a human being and not a gorilla. If you could help, it would be fantastic. Here are the 3 main problems I’m having right now:

    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?

    2. As you can see, the 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?

    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.

    To sum up, I’d like to have those three elements in the header aligned horizontally (PolyLang switcher, menu, shopping cart), as well as being more visible on the photo background.

    Thanks so much in advance for your help!

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    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.

    Thread Starter isaac85

    (@isaac85)

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

    Thanks!

    Thread Starter isaac85

    (@isaac85)

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

    Thanks!

    Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    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.

    Thread Starter isaac85

    (@isaac85)

    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?

    Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    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.

    Thread Starter isaac85

    (@isaac85)

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

    Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    Yup.

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


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

    Basically, the main navigation is too wide.

    • This reply was modified 3 years, 9 months ago by Job a11n.
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Header is misaligned, menu barely visible’ is closed to new replies.