Top navigation header position changing when browser width is changed

top navigation bar

- 8 years, 3 months ago wally
  Participant
  
  Expired
  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 8 years, 3 months ago by wally.
- 8 years, 3 months ago Mirela
  Participant
  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!
- 8 years, 3 months ago wally
  Participant
  
  Expired
  
  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.
- 8 years, 3 months ago Mirela
  Participant
  
  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!
- 8 years, 3 months ago wally
  Participant
  
  Expired
  
  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.
- 8 years, 3 months ago Mirela
  Participant
  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!
- 8 years, 3 months ago wally
  Participant
  
  Expired
  
  It works! This is resolved from my side, thanks so much for your outstanding and quick support. :-)
- 8 years, 3 months ago wally
  Participant
  
  Expired
  
  This reply has been marked as private.
- 8 years, 3 months ago Mirela
  Participant
  
  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!
- 8 years, 2 months ago wally
  Participant
  
  Expired
  
  Done, just left a 5 stars review on Envato, well deserved !
- 8 years, 2 months ago wally
  Participant
  
  Expired
  
  This reply has been marked as private.

Viewing 10 reply threads

You must be logged in to reply to this topic.

Community Forums

Top navigation header position changing when browser width is changed

Site Links

Useful Articles

Login