-
Posts
-
Hi, on my site I created an header widget:
#header .widget { left: 47%; padding-top: 0; position: absolute; top: 0; transform: translate(-50%); z-index: 999; }Why, when I change page it edit his position?
No, If I staying in “Home Page” the header widget is more near than logo. If I stayin in “Azienda” the header widget is more near than menù. Try It!
The Azienda page doesn’t have a scroll bar. You can replicate this by testing other pages with and without scroll bars or reducing the vertical height of your browser.
try changing the left value to right.
ie
right: 47%;Yes, but that CSS edit will apply to all the pages.
I have also noticed that the menu is doing the same thing.
Hi Pas7o,
It’s still left when I inspected on it, here’s a screenshot: https://imgur.com/a/DxSDjz3
Try flushing out the cache if you have any caching plugin enabled.Best regards,
NikkoI change it manually. Now the code is:
#header .widget { right: 50%; padding-top: 0; position: absolute; top: 0; transform: translate(-50%); z-index: 999; }But I have the same problem.
Hi Pas7o,
I have checked it but the measurements percentage wise is still the same.
The header container is 96% of the width of your site, and if it’s the homepage it has lesser width than Azienda because of the scrollbar being added on the right.
With that minor difference in width the positioning is recalculated and has few px difference but percentage is still the same.
The only workaround this is on the header container use a px based maximum width.Best regards,
NikkoThe other option could be to force the scrollbar to always be visible
html { overflow-y:scroll; }Or add more content to the pages so that they all scroll.
Hi Pas7o,
Yes, please do so, adding the scrollbar on the right side would make the width consistent. :)
@DigitalEssence thanks for helping out :)Best regards,
Nikko
- The topic ‘Header widget postion’ is closed to new replies.