Maisha Theme // Fixed header? Social menu color?

marieevepreaux · Member · Aug 4, 2015 at 6:08 pm
Copy link

Add topic to favorites
Hello y’all, CSS Wizards!

I am starting to work on a new website and I am looking into the possibility of having two things changed through the wonderful magic of CSS.

1: can i have a fixed header? I know it is an option for the wordpress.org users of the same theme, but its not in the header options for us w.com users… any css code for that?

2: though i know the color of the social menu will be changed accordingly to the color options, but I dont like how the white part of the icon will turn to gray on hover. Any way I can customize that?

Thanks a thousand!
Marie

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Aug 5, 2015 at 3:44 am
Copy link
Are you talking about having the image and “Welcome to Lead” be fixed?

On the social icons, you can change the hover color. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.
```
.social-navigation a:hover {
    color: #33ff33;
}
```
marieevepreaux · Member · Aug 5, 2015 at 4:17 pm
Copy link
Thanks for helping out, @thesacredpath!

The custom css worked well for the social menu. Is there any chance I can apply the same thing to button?

As for the fixed header, it is the logo / navigation banner that I would like to keep at the top of the screen at all time, much like I did on one other of my wordpress sites (leadshepherd.org). Any pointers for me?
thesacredpath · Member · Aug 5, 2015 at 8:36 pm
Copy link
Thanks for the clarification. In the following the first two rules fix the header/menu area. The second two give you the ability to change the background color on the button for the non-hovered and hovered states.
```
.headerblock.standard {
    position: fixed;
    width: 100%;
}
#content {
    margin-top: 75px;
}
.content-caption .button {
    background: #cc0000;
}
.content-caption .button:hover {
    background: #33ff33;
}
```
marieevepreaux · Member · Aug 6, 2015 at 5:24 pm
Copy link
The second two regarding the button color worked well. However, the first rule seem to be faulty – the word “fixed” shows up in red in my css. Any idea why?
thesacredpath · Member · Aug 6, 2015 at 6:00 pm
Copy link
The red is just the standard syntax color coding and there is nothing wrong. It is sort of unfortunate they used red as most people not familiar with all the CSS and programming syntax color coding would rightly assume something is wrong. It still makes me look twice and I’ve been doing this since the late 90s.
marieevepreaux · Member · Aug 6, 2015 at 7:43 pm
Copy link
OK, but the rule still doesn’t apply. So besides the red, something else is most definitely not right… Any idea what’s up?
thesacredpath · Member · Aug 6, 2015 at 8:39 pm
Copy link
Ah, it works on Firefox, but not on webkit based browsers (Safari and Chrome). Actually it does work on Safari and Chrome, but the image is riding up and over the header stuff. Replace that rule with the following. I added a z-index declaration to force the webkit browsers to place the header stuff in front of the image.
```
.headerblock.standard {
    position: fixed;
    width: 100%;
    z-index: 10;
}
```
marieevepreaux · Member · Aug 6, 2015 at 8:45 pm
Copy link
Works! thank you!
thesacredpath · Member · Aug 6, 2015 at 8:50 pm
Copy link
You are welcome, and sorry I didn’t notice that originally. :)

No items found.