-
-
Hi Mihalia,
thanks for your support, I agree the previous ticket was getting too messy and better to start fresh to focus on the current issue.
I am still struggling with the top navigation bar position, and I tried to fix following your suggestions but I still have the following problem: when the browser width is changed, the top navigation header is not moving in sync with the the logo/menu bar. Let me explain with some examples. In the below link I am using a ruler plugin to measure the browser width (you can see the ruler measured values in the screenshots).
Here the browser width is 1420px and the top navigation is left aligned with the logo, everythign loosk good
https://monosnap.com/file/zIUlPzBSP4VWzCqHv74vTXUhoT16g3
Here the browser width is 1675px and as you see the top navigation bar is shifted a lot towards the left side
https://monosnap.com/file/WNCtOOYpabdW6ZGGHvgzeirpy2Cldv
Here the browser width is 1090px and as you see the top navigation bar is wrapped around and pretty ugly to see
https://monosnap.com/file/NgsMtGM7o78YyqqBwkmorWHoWBXmS5
I tried different combinations of the CSS commands that you gave me before, but whatever value I put in there, changind the browser width always create the issues highlighted above.
I am sorry this problem is dragging for so long, it wasn’t there with the previously used version of the theme.
Thanks so much for your kind support.
- This topic was modified 6 years, 12 months ago by wally.
-
Hello,
I removed all custom css you had added regarding the top header position. In the General Options > Custom Css box and in the home page and blog page’s custom css box.
I added this code in the general options custom css box:.row-fluid .span6:nth-child(2) { width: 42% !important; }.row-fluid .span6:nth-child(1) { width: 55% !important; }
The top navigation is aligned in all pages. See screenshot. Let me know.
Best regards!
-
Hi Mihaila,
thanks so much, for large browser width it works perfectly now. Is it also possible to fix for small browser width? I see it still wraps the top nav content when the browser width is small:
https://monosnap.com/file/NgsMtGM7o78YyqqBwkmorWHoWBXmS5
I think that the responsive theme should avoid wrapping, going directly to a different layout removing the stuff for which there is no space when the browser window is reduced?
Thanks.
-
Hello,
The top navigation is 1100px wide in normal desktop screen. While the screen gets smaller, the top nav elements should flow in order to fit the new layout. I added some more code into your custom css box. Please see soem screenshots of the results:
https://pho.to/Af8yc
https://pho.to/Af8yu
https://pho.to/Af8zV
For further changes, edit the current code or add more to your wish.Best regards!
-
Hi Mihaila,
your latest fix totally solved the responsiveness of the top navigation bar left content. The right content (icons) still have some problem in smaller resolutions:
https://monosnap.com/file/B7wZfuwKAMBUPwshcwrOiQpwERx5Za
https://monosnap.com/file/hg1rScdEfAyuYX8vFkJFqtM7rhbkPW
Is it possible to fix that too?
Thanks.
-
Hello,
-For this: https://monosnap.com/file/B7wZfuwKAMBUPwshcwrOiQpwERx5Za ?
I added margin to the left. This is the responsible code:@media (min-width: 768px) and (max-width: 979px) { .row-fluid .span6:nth-child(1) { width: 100% !important;} .row-fluid .span6:nth-child(2) { width: 100% !important; margin-left: -4px !important;} .pull-right { float: left !important;} }
Change the values to your wish if you want to align it differently.
Screenshot: https://pho.to/AfBQw-To change the ipad landscape alignment, i edited out this code:
@media (min-width: 980px) and (max-width: 1024px){ .row-fluid .span6:nth-child(1) { width: 72% !important;} .row-fluid .span6:nth-child(2) { width: 25% !important;} nav .menu > li { margin-right: -2px !important; margin-left: -2px !important; padding-right: 0 !important; padding-left: 0 !important; } }
Screenshot: https://pho.to/AfBRE
Best regards!
-
It works! This is resolved from my side, thanks so much for your outstanding and quick support. :-)
-
-
Hello,
I am glad to know that we were able to help. If you are happy with our support, please
rate the product with 5 stars under the Downloads tab of your Envato
profile. You can add a review there too.
This is very important for us to be able to keep working hard and provide more
awesome work so thank you very much for your appreciation!PS: Yes, i do speak italian :)
Thank you for being an awesome customer!
-
Done, just left a 5 stars review on Envato, well deserved !
-
-
You must be logged in to reply to this topic.