Multiple issues with mobile header and social share buttons on portfolio

[stoneslade]

I was having an issue with the header on my imac. When I scrolled down the header would turn white making my white logo disappear. I searched your forum and found a CSS fix
.naked-header .is-sticky #header-section::before, .naked-header #header .is-sticky .sticky-header, .naked-header .is-sticky #header.sticky-header {
background: #232323 none repeat scroll 0 0 !important;
}

Now I’m noticing on mobile that there is a white bar on top and a grey bar below it hiding the top of the logo when my phone is upright. If I turn it to it’s side the white bar goes away, the grey bar no longer covers our logo and has the WordPress logo top left above our company logo.

The logo is only being covered on the pages we are using the naked header with rev slider… the white and grey bars show up on all pages but doesn’t cover the logo on the pages we don’t use the naked header on. We would like to use the naked slider on all pages but ran into this issue.

Additionally, when using the portfolio feature, which we do on the “Press” page… I can’t get the social share buttons to change colors. Our pages are black, the boxes around the social buttons are white but the social icons are way too dark, and when I go to “color customizer” they’re nice, bright and visable

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1) Please remove that CSS, you can use the Naked header option built in without needing to use CSS:

2) You can change them to white using this:

.comments-likes a i,
.comments-likes .love-it-wrapper a i {
	color: white;
}

[stoneslade]

Hi David,

As I stated above… I was using the naked header just as you are suggesting. When you scroll down the navigation header turns white which makes my white logo disappear. Now that I removed the CSS as you requested, that is happening again. Either you didn’t read what I typed or I didn’t explain clearly enough.

The CSS you provided doesn’t seem to change anything that I can tell… the social icons on the Portfolio page are still very dark grey and barely visible on the black page, the naked header still turns white making my logo not visible (which the code you had me remove had fixed), and my logo is still being covered by the white and grey bars on the mobile pages using the naked header.

[stoneslade]

I just re-read my original post and don’t see how I could have explained any better… here are more screenshots if that helps. I also included log in info on my original post. I’m sorry if I seem agitated but it is a bit frustrating to wait 24 hrs for a response that literally didn’t address any of the issues we are having.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1) As you are looking to modify the theme I am trying to understand your desired final outcome and help you, getting agitated will not help. We try to respond within 24 hours but usually much before, however we do not work over weekends.

From what I have read, you simply want to remove the white sticky header that appears? When I test this CSS, I see no issue on your site in the mobile orientation.

.naked-header .is-sticky #header-section::before, 
.naked-header #header .is-sticky .sticky-header, 
.naked-header .is-sticky #header.sticky-header {
    background: #232323!important!important;
}

The white borders you refer to is simply the color you have set for the page heading or asset background, you can also amend that with this example:

.asset-bg {
    border-color: red;
}

If you need this implemented critically for your site, I’d suggest you reach out and hire a developer to implement your customization request.

2) Amend to:

.comments-likes a i,
.comments-likes .love-it-wrapper a i {
	color: white !important;
}

[stoneslade]

This reply has been marked as private.

[stoneslade]

This reply has been marked as private.

[stoneslade]

This reply has been marked as private.

[David Martin – Support]

To change the transparency of the sticky header background you can use the CSS RGBA attribute to adjust the color/transparency. So a black background, with a 30% opacity would be:

.naked-header .is-sticky #header-section::before, 
.naked-header #header .is-sticky .sticky-header, 
.naked-header .is-sticky #header.sticky-header {
    background-color: rgba(0,0,0,0.3)!important;
}

[stoneslade]

You are the man! Thank you David

[Rui Guerreiro – SUPPORT]

no problem. Thanks David.

-Rui