Sticky and color backbroung header

bronston59

I'd like to do the header in Focus as in Magz-ii : sticky, plus background color (logo will be a white png, other text should be white). Is that possible? Thanks

aman204

bronston59 Probably, the suggestion provided here could help however getting the similar effect and functionality for JA Focus as seen in JA Magz II would require heaps of customizations as the specific feature is unique and distinguishable in JA Magz II

bronston59

aman204
Thank you, Aman. Doesn't work.

As I was thinking to fix onlyheader with logo
I tried this in header block
<div class="stickyheader" data-spy="affix" data-offset-top="150">

and then, in custom css

.stickyheader.affix {
position: fixed;
top: 0px;
z-index: 999;
float: none;
width: 100%;
}

It doesn't work, it blocks the template and doesn't allow to scroll down

So i tried your solution in navigation

.stickymenu.affix {
position: fixed;
top: 0px;
z-index: 999;
float: none;
width: 100%;
}

It doesn't work either

saguaros

bronston59
Kindly check the admin account again as the provided info doesn't work.

And share me the ftp account, I will check for you.

bronston59

Sorry, user name was wrongly all in small caps, now i've checked capital letters and it works as it is.
(I mean, credentials work, but the solution to a sticky and coloured background header did not, of course)
saguaros

aman204

bronston59 As I was thinking to fix onlyheader with logo

You may try this :

1) Go to /tpls/blocks/header.php and change this around line 93:

<header id="t3-header" class="container t3-header">

<header id="t3-header" class="container t3-header" data-spy="affix" data-offset-top="150">

2) Add this to custom.css file :

header#t3-header.affix {position: fixed;top: 0px;z-index: 9999;float: none;background: #fff;margin: 0 15em;}

bronston59

Thank you, Aman.
However it only works a little. On desktop screen it deplaces (moves to the right a little). On mobiles phones it lets a small box on the top right. A very strange effect.aman204

aman204

bronston59 On desktop screen it deplaces (moves to the right a little)

You can adjust margin value here accordingly :

header#t3-header.affix {position: fixed;top: 0px;z-index: 9999;float: none;background: #fff;margin: 0 15em;}

On mobiles phones it lets a small box on the top right

Try add this to custom.css file :

@media only screen and (max-width: 768px){header#t3-header.affix{margin: 0 auto !important;width: 100% !important;}}

bronston59

Thank you very much, Aman. It is really working, sticky header, both in desktop and mobile, perfect. I'm very much grateful

There is still a part of my question that probably must sound silly, but I'm not an experimented developer or designer as you can check by yourself. It's about the header background color. I know it must be something in css custom sheet. I've done it with the sticky header, a new color so as a white logo can be seen, and it works. However, I don'f find which css style I must call in custom to change background header color when first and normal loading. If you could help me that would be so much useful.
aman204

saguaros

bronston59

Could you illustrate the modification you expect via screenshot?

aman204

bronston59 Try add this to custom.css file :

header#t3-header.container{background: #1a3867;}

bronston59

Thank you very much, Aman. Really fine. You've been very helpful
aman204