- This topic has 83 replies, 16 voices, and was last updated 7 years ago by
Leo.
-
AuthorPosts
-
January 21, 2016 at 12:56 pm #167221
Tom
Lead DeveloperLead DeveloperAwesome π
January 25, 2016 at 2:28 pm #168028nipe
Sorry to bother you again.
I just noticed the sticky header/menu code a few posts back means it will always be sticky on both desktop and mobile. Is there a simple way to make the code apply only on desktop?
January 25, 2016 at 11:45 pm #168060Tom
Lead DeveloperLead DeveloperAny chance you can link me to your site so i can take a look at whats happening?
Let me know. π
January 26, 2016 at 11:31 am #168185nipe
It’s on a local webserver so far. But I figured it out, it wasn’t that hard once I cleared my mind. π
I just put the sticky code within@media (min-width: 769px) {...}
and it won’t be sticky on small screens.January 26, 2016 at 11:28 pm #168265Tom
Lead DeveloperLead DeveloperAwesome! Glad you figured it out π
February 2, 2016 at 11:51 am #169945nipe
Hmmm, Tom what have you done?! π
Something weird happened with the 1.2.79 update, or perhaps it was the WordPress 4.4.2 update. Can you please take a look at brfviolen.nu/test/ and tell me why it’s now behaving the way it is?
Before the update the 3 menu items at the top where vertically aligned to the middle of the grey header. And didn’t jump to the left covering the Site Title once you start scrolling.
The code used for fixed header and top menu is the one mentioned in our conversation above.
-
This reply was modified 9 years ago by
nipe.
February 3, 2016 at 9:25 am #170189Tom
Lead DeveloperLead DeveloperHi there,
Any reason why you’re not using the Menu Plus add-on for this functionality? It might work a lot better.
Let me know π
February 3, 2016 at 9:40 am #170191nipe
I don’t understand, I do use Menu Plus and everything worked fine before the updates.
I’m very new to this so I would appreciate it a lot if you can point me in the right direction if there’s something I could do in a better way.I want the title to the left, the menu to the right, both vertically aligned to the middle of the grey background and fixed when scrolling.
February 3, 2016 at 5:12 pm #170254Tom
Lead DeveloperLead DeveloperIf using Menu Plus, this topic shouldn’t really apply. You can upload your logo as the menu logo and set everything up in the Menu Plus area.
This topic is for making the entire header sticky, which I don’t think is necessary with the menu logo option.
That being said, I’m on an iPad in a hospital with my newborn baby, so I might be missing something. Are you using the menu logo option, or the code provided in this topic?
February 3, 2016 at 10:31 pm #170274nipe
Congratulations! I hope everything is fine. You should focus on your family for a while and not answering questions here, but I’m glad you do answer them. π
I was making the entire header sticky with the code in this topic. Since the site title is plain text I didn’t think of making it an image and apply it as a menu logo. I’ll give that a try later today.
But if I recall correctly the menu logo will be placed right next to the menu items. I guess it should be possible to separate them, logo to the left and menu items to the right, but I’m not that good with CSS. I’ll try some myself but again any tips is appreciated.
February 4, 2016 at 10:45 am #170422nipe
Tom you were right (of course). Adding the title as a menu logo and relying on menu plus made everything a lot easier. No hooks and stuff needed, just some padding-top to get the menu items lined up correctly. Thanks a lot!
February 4, 2016 at 4:52 pm #170495Tom
Lead DeveloperLead DeveloperYou’re very welcome! I’m glad I was able to help π
It would be cool to be able to add text in place of the menu logo, I’ll look into that.
November 29, 2016 at 11:40 am #249305Chris
Hi Tom,
Using your custom-fixed-header I successful made my header and menu sticky. Yay!
However, when the site is in the responsive mobile view, the padding is moving everything down too far. Boo!
Any advice for me?The site is http://psifulfillment.global
Thanks,
ChrisNovember 29, 2016 at 9:51 pm #249566Tom
Lead DeveloperLead DeveloperYou can adjust the container padding on mobile like this:
@media (max-width: 768px) { .container { padding-top: 40px; } }
December 2, 2016 at 6:22 am #250615Rui
As of today, can you confirm there isn’t an option (via backoffice/customize menu) to put the header fixed on top of the content area?
it’d be great in order to user powerpack’s dot navigation while keeping the menu, for example.
thanks!
-
This reply was modified 9 years ago by
-
AuthorPosts
- You must be logged in to reply to this topic.