Archived topic
Adding a png shadow image under the header
12 replies · Started by Tim on February 24, 2020
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.
Also adding text decoration underline on mouse over for menu.
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!
This is the site using your template and building from scratch.
http://bigtexcarpet.com/wp-admin/post.php?post=1896&action=edit
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 :)
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
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.
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
Can you also link me to the background image you're wanting to apply?
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);
}
You guys are awesome!
Glad we could be of help