hi there,
i set my main menu to fixed top.
browser window width ist just about the width of the site.
when scrolling up the menu sticks to the top of the window but shrinks in width to the content width (90%). that looks strange. it should stay the with of the website and/or banner.
is there a fix for that? details in private note 
thanks a lot! kai
Hello Kai,
Thanks for posting in! I have checked your site and I could not replicate the issue. This is what I am seeing:
What you are experiencing could just be a browser caching issue. Kindly clear your browser cache or use private browsing mode (Incognito Mode) and test your site again.
Hope this helps. Please let us know how it goes.
thanks. just narrow your.browserwindow a. little more. customer discovered it. tried different browsers already. thanks again! kai
hi there,
i was a litte short last time it was 4h in the morning… 
but nothing is solved. the problem is still the same. please read my first post again.
browserwindow was too wide in rues case. make it smaller and scroll that the menu sticks to the top of the window. that is important to see the effect.
as i wrote - it is not a cache issue!
thanks a lot! kai
This is a responsive issue and it is outside of our customer support because it needs some customization with tricky CSS. Please seek help for a 3rd party developer to fix your responsive issue on your header and sticky header below 1287px. I hope you understand regarding this matter.
Thank you.
dear marc,
thanks for your reply.
i must say i am disappointed to read these kind of replies much more often than i used to. usually you helped with stuff like this without question. that is why i use theme.co as my only theme for many websites for many years.
aside from that this issue is not made by me. i did not use funny custom css. i used only the theme with its standard options. this is my goal in general because i want it simple and want to have as little issues as possible.
so i think this is very much a support question which i should get help with. i just used the theme as it is.
thanks again for your help! best wishes, kai
Hello Kai,
We apologized for the confusion. I have checked your site again and have seen what you think an issue when you resize your browser.
Actually this is quite normal. As you can see, the navigation has been design on medium and large screens. You have longer menu item titles plus in X > Theme Options > Header > Links - Alignment > Navbar Top Link Alignment, you have set a 20 pixels for the left and right side of each menu items. This space will add up between two menu item so it will becomes 40 pixels in between. The pixel spacing will also be applied to all screen sizes. And because of this, as you noticed, when the browser window size is below 1130 pixels, some of the menu items goes to the second row. There aren’t enough space to display the menu items which is why it goes to the second row. Regretfully we do not have a setting or option that you can change the navigation settings within a specific screen sizes. Below are the options that you maybe able to prevent this from happening:
1.) Reduced the number of menu items or;
2.) You can reduce the top link alignment so that the menu items will stay close to each other or;
3.) You can make use of custom CSS code added into X > Theme Options > CSS. The navbar width and settings should be adjusted when the browser size falls between 980 - 1130 pixels. Take the code below as an example:
@media (max-width: 1130px) and (min-width: 980px){
.x-navbar .x-container.max.width {
width: 100%;
max-width: 98%;
}
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
padding-left: 10px;
padding-right: 10px;
}
}
Bear in mind that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.
Note: If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance. We are unable to provide support for customizations under our Support Policy.
Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:
- Intro to CSS - https://goo.gl/mFuWQT
- How to get CSS selectors - https://goo.gl/BmoH39
- Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
- CSS Media Queries - https://goo.gl/L3ZHNg
Best Regards.
dear @ruenel,
thanks so much for your detailed and understanding reply with solutions and a very useful css code!!!
but… i am afraid i my explanation of the actual problem was confusing. i was not aiming at the 2 rows of links in the menu. i know this is normal to happen and i am also not happy with the long button names. but this is not up to me to decide
my problem with the menu is, that it actually shrinks to 90% width. please have a closer look at the gray background of the menu. it goes all the way of the site width like the slider at the very top in a normal sized browser window. but if you scroll up and the menu gets fixated at the top of the browser window this exact moment the menu (gray background) shrinks to 90% (my setting for content width). i can’t make a screenshot of this since the silder has already disappeared when this happens. but if you compare it to the 2 columns of text you see what i am referring to. see the first 2 screenshots here.
hope this clears things up all the best! kai
Hello Kai,
Does it happen on all of the pages or just on your homepage only? Actually I could not replicate or find any issue.
This is what I have having if I open the page:
And when I scroll the page:
Actually the menu stays the same at 100%. I cannot replicate like in your first screenshot. It could be just caching. Have you tried checking the site on another browser or in a private mode?
Please let us know how it goes.
dear @ruenel,
your browserwindow is still to wide…
it happens on all pages. i just rechecked.
it is not a cache problem! i use different browsers and my customer has the same issue. as i wrote. also private mode does not change that behaviour.
please play with the window width some more. make is just as wide as the website with and then you will see it. it happens between site width and before the mobile menu appears.
hope that helps. this turns out to be complicated… sorry.
best wishes, kai
Hello Kai,
After careful comparison in between browser resizes, I finally see it. This is because of the boxed layout. To prevent this from happening since you have a different navbar color against the content area, you may use this code into X > Theme Options > CSS :
.x-boxed-layout-active .x-navbar.x-navbar-fixed-top.x-container.max.width {
width: 100%;
}
Please let us know how it goes.
Hey Kai,
I just like to clarify here that this is a bug in our theme and the code Ruenel provided is a workaround. I’ll post this in our issue tracker so it will be queued for fixing “officially”. Once an update is available, please check if this has been fixed in our Changelog. The new Changelog can be read or seen in our Themeco Docs.
Please note that we really do not provide custom codes as part of our theme support. I’ll remind Ruenel of that.
Thanks.
dear @ruenel and @christian,
thanks for the workaround and acknowledging the the bug!
the website will go online today
best wishes, kai
YES! Man, I thought I was going crazy! I’ve been experiencing this header shrinkage too and independently came to the same conclusion…that it only happens when the site is in boxed mode. I didn’t see this mentioned, but in my case I’m using the Pro theme with a standard header…if that helps tracking down the bug.
Agreed, thank you team Themeco for your continued support!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.