[Resolved] Adding a png shadow image under the header

[Tim]

I would like to add a shadow.png under the main menu similar to this page. http://dentistnampaidaho.com/. I’m seeking your guidance and recommendations.

[Tim]

Also adding text decoration underline on mouse over for menu.

[Leo]

Hi there,

Do you have a page hero/header element created as the example site?

Any chance you can link us to the current set up in question?

Please open a new topic for a separate question.

Thanks!

[Tim]

This is the site using your template and building from scratch.
http://bigtexcarpet.com/wp-admin/post.php?post=1896&action=edit

[Tom]

Hi there,

Any chance you can link us to the live page? We’re not able to view the admin side of things.

Let us know 🙂

[Tim]

Hi Tom,
I’m creating this from scratch utilizing your pivot template. If you need to get into the back end no issues as this is in development. Delete this when able.

I would like to add a shadow.png under the main menu similar to this page. http://dentistnampaidaho.com/.

Here is the site that I’m working on https://bigtexcarpet.com/ using the Pivot template.

This is the image I would like to use under the header which will be solid color.
http://bigtexcarpet.com/wp-content/uploads/2020/02/shadow.png

[Tom]

I’m not able to load that page – I’m getting a “Your connection is not private” error, which I can’t even bypass.

Any chance you can set up the SSL certificate?

Be sure not to post credentials in these forums, as the replies are public.

[Tim]

Tom,
I deleted the otehr domain as it was just a dev site. This URL has the SSL cert. https://bigtexflooring.com/ I added the same shadow to the main page only. Would like to have it under the main nav like the other http://dentistnampaidaho.com/.
Thanks for the help!
Tim

[Tom]

Can you also link me to the background image you’re wanting to apply?

[Tim]

https://bigtexflooring.com/wp-content/uploads/2020/02/shadow-1024×90.png

[David]

Hi there,

try this CSS:

.main-navigation {
    position: relative;
}

.main-navigation:after {
    content: '';
    position: absolute;
    background: url('https://bigtexflooring.com/wp-content/uploads/2020/02/shadow-1024x90.png') no-repeat center top;
    left: 0;
    right: 0;
    top: 100%;
    height: 100px;
    pointer-events: none;
}

/* Adjust for site header on static navigation */
.main-navigation:not(.is_stuck):after {
    top: calc(100% + 10px);
}

[Tim]

You guys are awesome!

[David]

Glad we could be of help

[Author]

Posts