A couple of little challenges

[Steven McGregor]

Hiya Tom

I have a client that is going for a specific look. So I have a couple of challenges that I am trying to sort out.

1. The menu needs to overlap the header by about 50% (contained)and the content area needs to be up against the header.

2. The borders separating the menu items must only be around 30px high and not the full height of the menu bar.

The link below is the image that I am trying to replicate.
https://www.dropbox.com/s/gadtausdowyxfis/thememenu.JPG?dl=0

Looking forward to hearing from you.

[Tom]

Hi there,

To overlap the menu, you’ll want to look into absolute positioning in CSS – just be sure to wrap it in a media query so it doesn’t apply on mobile:

@media (min-width: 769px) {
    /* CSS for desktop only in here */
}

To do the borders, you’ll either need to wrap your navigation labels in span elements and then target those elements with CSS, or you’ll need to use a background image and apply it to each navigation item. You can position it to center right using some CSS.

[Steven McGregor]

Thanks Tom

I used the absolute position for the menu and I can get it to overlap but there is no property to center the menu on the page. Using it also stops the sticky menu from working.

I am also battling to isolate the navigation labels as the line height is the menu height. So I change the line height and the entire menu changes.

I know enough CSS to make minor mods and I am normally pretty good at researching and making those changes. This one has has me stumped. I have wasted 2 days trying to figure it out.

[Tom]

Hard for me to tell what’s going on with the first point without seeing it.

For the second part, wrap your navigation in a <span> tag in “Appearance > Menus”, then apply the CSS to the span tag which will only be as tall as the label.

[Author]

Posts