Blue Background on Smaller Screens

[muhammad_2013331]

Dear community;

I have got this blue background only on smaller screens in navigation bar:

Can anyone tell how to remove it?

[BenPleysier]

The answer lies in the code.

Please upload your document to a (temporary) online location and supply the URL to that location. If that is not possible, please paste your your HTML and CSS here.

[muhammad_2013331]

https://codeshare.io/291JpB

[BenPleysier]

Thank you for that. However, I do not see the code for singlePageTemplate.css

[muhammad_2013331]

https://codeshare.io/G8vPxZ

[BenPleysier]

If you search your style sheet (CSS) for background: #52ba5; notice that this appears three times. By changing the value you will be able to change the colour.

If you want to hide the menu bar and only show it when a hamburger icon is clicked, have a look at Show / Hide Navigation | HTML Dog

As a side note: Get into the habit of designing desktop down or mobile up - the latter is my preference. This way you need to only override the style rules when neccessary, i.e. background: #52ba5; need only be applied once, not three times.

[muhammad_2013331]

I removed it in all three places so that there is no background but to no avail...

[muhammad_2013331]

Modifying in the GLOBAL file did the trick...can you guide how can i make the header transparent so that i can see background rather than white color?

[BenPleysier]

.hero {

padding-top: 150px;

padding-bottom: 150px;

-webkit-box-shadow: 0px 0px;

box-shadow: 0px 0px;

background-color: transparent;

background-attachment: scroll;

background-image: url(../images/background-1747792_1280.jpg);

background-repeat: no-repeat;

background-size: cover;

}

[muhammad_2013331]

i want to get rid of light grey background in Nav bar..and replace with a transparent background so that picture in header is visible..

[BenPleysier · Accepted solution]

In that case, forget about reply 8 and change the background to transparent for the navbar. In other words:

replace

background: #52ba5;

with

background: transparent;

[muhammad_2013331]

Still not working....here is my new code...would appreciate if you can point the code line number:

https://codeshare.io/5XBZEn