Adjusting Margin of & shadow effect of the Main Nav

This topic has 7 replies, 3 voices, and was last updated 6 years, 6 months ago by Tom.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
October 11, 2017 at 2:11 am #401160

Tom

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

Leo
Staff
Customer Support

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

Tom

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
Tom
Lead Developer
Lead Developer
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

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
Tom
Lead Developer
Lead Developer
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

Tom

All good! That worked. Thanks Tom 🙂

October 13, 2017 at 9:46 pm #402949

Tom
Lead Developer
Lead Developer

You’re welcome 🙂
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

[Resolved] Adjusting Margin of & shadow effect of the Main Nav

Popular Articles

Start building better websites today.