Answered

How to remove drop shadow from Header

(1) Share

Report

Posted on by SH-02081352-0

Hi all,

I am designing a site and I want to remove the drop shadow under the header. I was not able to find any "box-shadow" properties in the header item.

Is this called something else in Power Pages? How can I turn off this function?

Thanks!

Categories:

General topics

I have the same question (0)

All responses (4)

Answers (1)

Suggested answer

Fubar 8,461 Super User 2026 Season 1 on at

Like (2)

Report
Copy link

Link copied!

Including an image in your post may help identify exactly what element you are meaning.

(this could be different depending on which template you have used) Inspecting the nav bar div, there is a box-shadow and also a -webkit-box-shadow (note: you may need to override both with !important)

Was this reply helpful? Yes No
SH-02081352-0 49 on at

Like (1)

Report
Copy link

Link copied!

Hi Fubar - Thanks for you reply including the image. That helps me find where the code is.

I found out that it was the box-shadow that I wanted to get rid of. However, I wasn't able to find that particular piece of code in the Header<> file on the Visual Studio code. Do you happen to know if there is a different place where the code would be stored?

Was this reply helpful? Yes No
GWham 58 Moderator on at

Like (2)

Report
Copy link

Link copied!

You can overwrite the box-shadow styles to remove the drop shadow.

Was this reply helpful? Yes No
Verified answer

ragavanrajan 7,044 Most Valuable Professional on at

Like (2)

Report
Copy link

Link copied!

Hi There,

In Design studio > Styling> your current theme > Three dots> Upload your new css file

2. Add the following code

.navbar-static-top.navbar-inverse {
background-color: #ffffff;
border-color: transparent;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}

You can use VS Code online to edit your custom CSS

Once done. Sync it and preview the web page the drop shadow will be removed

Hope it helps.
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

Was this reply helpful? Yes No