Neither Fish Nor Fowl Nor Good Red Herring:- Is this a Menu or Image problem?

  • Hi all,

    I’ve just started building my first site, and naturally, I’m trying to get the background structure looking pretty before loading content. I found a theme (Head Blog). I cropped myself a header image, and found an appropriate textured background image. I found that my Menu looked a little weird, so I downloaded the Max Mega Menu Plugin. Set up the Menu colour, stretched it down to remove some of the white space underneath the menu and above the background image/site content.

    Here’s the site as it now stands. [url]www.munitora.com[/url]

    But now I’m a bit stuck. Firstly, I’ve got these white bars either side of the menu. Nothing I do in tweaking the menu or the background image seems to affect it. So how do I get rid of it? Ideally, I’d like to fill it in like the rest of the background image.

    Secondly, when I view the site as if from a tablet, the lines between the different menu options don’t line up. Is it possible to make it so they do. I already had to set the item spacing quite high to ensure they weren’t all clumped up. I’m happy to delete that if there’s another way of making the options equally space throughout the menu.

    Many, many thanks for any help offered.

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

Viewing 3 replies - 1 through 3 (of 3 total)

  • The white bars is an easy fix with the following CSS

    .main-menu #site-navigation {
    background-color: transparent;
    box-shadow: none;
}

    You can choose to omit the box-shadow from there if you want however it will leave a “ghost” shadow across the background of the site that you may or may not want.

    The separators in the menu is a bit different though because the menu items are all different lengths in terms of the content. On a tablet size, ideally how many menu items would you want to span across the menu before it drops down into the next row? I was testing around with it a bit and 3 seems to have too much space (especially for smaller menu items) but having 4 items across may require shrinking down the font size to get the longer items to fit in a smaller width.

    Thread Starter cannonking

    (@cannonking)

    Jarret, thank you very much for replying. I input the CSS, and it works a treat.
    Only problem now is that the transition from header image to background image is a little more harsh than I was expecting. Is there a way of adding a slight dark border between the two?

    Not sure if I understand what you mean by “harsh”, but that will make a border below the header, which you can change to your liking:

    .site-header {border-bottom: black solid 2px;}

    If you want it softer, you put a shadow there.

    • This reply was modified 5 years, 6 months ago by itonic.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Neither Fish Nor Fowl Nor Good Red Herring:- Is this a Menu or Image problem?’ is closed to new replies.