Archived topic

Adjusting Margin of & shadow effect of the Main Nav

7 replies · Started by Tom on October 11, 2017

Viewing posts 1–8 of 8

October 11, 2017 at 2:11 am #401160

Hey guys,

I'm having trouble achieving a certain effect on the main-nav for one of my sites. I'm trying to create a shadow with the Main-Nav an have it halfway between the GP hook: Before Header Content and the first section of my website. I'd also like to add a shadow at the bottom of the main nav.

Any ideas of how I could achieve this?

Here's an example of what I'm talking about: http://codeless.co/handel/construction/

I followed this post exactly to build the GP hook also: https://generatepress.com/forums/topic/icons-with-text-in-header/

I would show add a link to the website I'm building, but it's on a local server at the moment so I'm not sure if you'll be able to see it. If you need to see, I'll upload it to my one of my hosting accounts.

Thanks in advance!
Tom

October 11, 2017 at 9:05 am #401386

Hi there,

Yeah seeing what you have so far would be much easier for us to help :)

Let us know once it's uploaded.

Thanks!

October 12, 2017 at 6:29 am #401870

No worries! I thought that might be the case.

Link to uploaded website: http://amplumbingworks.blakeydesigns.com/

As mentioned, I'm trying to achieve the shadow & overlay (between the two sections) effects similar to this website's navigation: http://codeless.co/handel/construction/

I know the GP nav is at full width right now, but I couldn't figure it out at a contained width - hence asking you guys!

Cheers,
Tom

October 12, 2017 at 9:39 am #402070

Hi Tom,

First, set your navigation to contained.

Then add this CSS:

#site-navigation {
    position: relative;
    bottom: -30px;
    box-shadow: 0px 20px 20px rgba(0,0,0,0.3);
}

Let me know if you need more info :)

October 13, 2017 at 12:06 am #402399

Tom, this is amazing! Thank you so much for helping me out with that. I didn't think it was going to be possible.

One more question, now that that's been sorted, there's too much space between the header and navigation. Any idea how I can reduce that?

Once again, thanks again for such amazing support. I'm really grateful I came across GeneratePress.

October 13, 2017 at 9:44 am #402705

Ah, try this instead:

#site-navigation {
    position: relative;
    margin-bottom: -35px;
    box-shadow: 0px 20px 20px rgba(0,0,0,0.3);
}

Let me know :)

October 13, 2017 at 5:07 pm #402874

All good! That worked. Thanks Tom :-)

October 13, 2017 at 9:46 pm #402949

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.