Topbar colour changes in mobile view

Re-Made · ‎05-26-2018

Hi

My topbar on my website is #8d2424 which is the primary colour in my site. When I look at the mobile version it is dark grey, which I wouldn't be that concerned about but my logo is in the bar which has red background so it looks really odd. I have tried changing rgba and hex codes in the Edit HTML section which did succeed but it also changed the drop down menu to #8d2424 which made the menu items difficult to read.

The comparison pix is below. The one on the left is the default mobile view and the one on the right is the correct colour which only changes when I start scrolling.

Can anyone let me know what the correct part of the code is I need to change in order to make the topbar #8d2424 (BEFORE scrolling) in the mobile version?

Thanks very much !

gpn1 · ‎05-26-2018

Hello collectively,

To fix this you need to do the following, go to Edit HTML/CSS and open the file "Main.less" search for the main "Header/Wrapper" parts and change the colors.
Make sure you change all styles like: Header/No-Header/Splash Nav

For example:

/* No Header page */
body.page-has-banner.no-header-page .birdseye-header {
padding-top: 10px;
padding-bottom: 10px;
background: rgba(35, 35, 35, 0.95);
background-image: none !important;

Btw, is your logo a PNG (Transparant)?

Re-Made · ‎05-26-2018

Hi GFX

Thanks very much for all this - I use Slick and my code is a little different and I changed header-wrap from transparent to the colour I want and weirdly now if I am within the weebly site editor and choose Mobile view it seems to have solved the issue. However if I check it on an external site (like http://whatismyscreenresolution.net) it is still grey.

http://whatismyscreenresolution.net/multi-screen-test?site-url=http://www.re-made.life/&w=320&h=480

My logo a jpg btw

Thanks very much again - any extra tips you have would be great but don't worry if not, appreciate the help anyway

Rachel O

gpn1 · ‎05-26-2018

Hello there again,

Yes i would like to advise you to use a PNG logo because that's better quality and you also dont have the problem with boxes around them. I have check out your website and it has to do something with the class: affix is-scrolling-down", for the rest idk, also the footer text override its content box of the (website you send, idk its your to?).

Re-Made · ‎05-27-2018

Hi

Thanks very much again for all your great help and I will look into it.

IDK not mine btw as far as I know! Thanks very much anyway for the extra advice 🙂