Hello, I’ve got a few questions regarding adjusting the layout of hivepress/taskhive.
I want to limit the size of the search bar to aproximately 2\3 of the width, and add a button to the right of the search bar. This I want on the requets archive/filter page and on the listings archive/filter page. See screenshot below for where I am talking about:
When I am creating a custom template with the columnblock, adding the searchbar in the 66% section and a button in the 33% section, they do not align according to the theme customazation/styling - overlapping the header section. see screenshot below:
I have made the header sticky, and this breaks the sticky widgets on the different pages, because they get stickied with a fixed position, and does not account for a fixed header aswell. Where and how can I adjust the stickied elements so that they are moved a bit further down ?
Hi,
These changes are possible, but they require the HTML/CSS customizations, I can provide some guidance if this helps.
Please try using the browser developer tools to highlight elements and check their CSS classes, then you can target these classes with CSS snippets Open Chrome DevTools - Chrome Developers Each page in HivePress has a unique CSS class on the body element, e.g. .hp-template--listings-view-page.
You can also scroll the page and check the sticky sidebar class when it’s scrolled, if there’s a unique CSS class you can try to add extra top padding to it.
Some guidance would be much appreciated. I’ve already set up a childtheme if some files needs to be edited.
I will try to add some padding/margin, but my first thought is that if it is added to the base- element, it will ruin the layout of the page when it is not stickied. And if added to the sticky element only, it probably will make an awkward jump when going from relative to sticky/absolut on scroll.
Please try following the suggestions above to inspect HTML elements and add custom CSS snippets for these elements, e.g. the listing search page has .hp-template--listings-view-page so you can target the search form this way. I assume that the sticky sidebar has a unique CSS class when it’s scrolled (it’s a JS script so I guess they add some extra class), this way you can target it when the page is already scrolled down and the header is also sticky.
Yes this fix works, but isn’t smooth at all. The issues with this solution is that the widget gets triggered by a scroll event, and is already hidden behind the navbar when the sticky js even occurs.
Also, when I change the height of the stickied element, it jumps down on the screen when stickied.
What I need is a way to target the JS and make the sticky feature trigger sooner on pages with a sticky navbar, and on these same pages, I need to position it with css as you mentioned - further down.
It’s possible, but this would require advanced customizations, e.g. a JS script that checks the sticky sidebar position on scroll (if it exists) and adds padding, or maybe CSS tweaks to add extra padding to the top of the window that equals the header height.
I see. Im not very good with js. Im not sure how it is triggered and how it is positioned.
is it not possible to make the event trigger before, and have it sticky further down, maybe with the viewport property? I mean, like pretend the screen hight is 90px smaller.
Like it probably accounts for the wp admin bar already.
Sorry, this requires further customizations and this is beyond our support scope. I found this tutorial, it may help because it describes a solution where the space taken by the header doesn’t disappear when the header is sticky Stop Using Fixed Headers and Start Using Sticky Ones - DEV Community 👩💻👨💻
