URL: awayhome.ca
Product: X
Screenshots:
https://we.tl/t-3dp24WpxMx
Hello,
The elements inside the main navigation (logo & links) on awayhome.ca doesn’t adjust its size based on the width of the screen, this is causing things to shift down and overlap content directly below the main navigation. It seems to start happening between 980px - 1237px. Any suggestions on how to fix this would be greatly appreciated!
Thanks
Hello @homelesshub,
Thanks for asking. 
I see that you are using quite an old version of X Theme 4.6.4 and Cornerstone 2.0.6. Please update to the latest version of X Theme 6.3.8 and Cornerstone 3.3.8. I suggest you to please take a look at our Theme and plugin update guide scroll down to the manual update section as you will have to manually update X Theme and Cornerstone.
Thanks.
Do you think this could resolve this problem? I don’t feel comfortable doing any updates without first backing up, as we can’t afford to lose any content. Is there somebody who can kindly go into the backend to look into this issue?
Hi There,
Thanks for writing in!
It’s always recommended to take backup before doing any update.
Regarding your question, seems like the menu is big its breaking in certain break point. You can manage that by decreasing the font size of the menu item.
I will try to help you on this through custom CSS, which is is out of our theme support scope.
Please add this CSS to your theme option -> CSS and let me know if that helps!
@media screen and (max-width: 1240px) and (min-width: 768px) {
.x-navbar-inner .x-container.max
width: 95%;
}
.x-navbar .desktop .x-nav > li > a {
font-size: 15px;
}
.x-brand img {
width: 100px;
}
}
Any further adjustment you can do changing the value.
If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.
I recommend you to watch following video that will help you to get started with CSS.
Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Thanks.
Hey, thanks for the reply!
I dropped the code in:
Dashboard > Appearance > Editor > CSS
(See images below)
Not sure if I dropped the code in the wrong place, but it didn’t fix the issue.
Is there something I did wrong?
Thanks!
Sorry for the confusion here. Please remove the custom CSS. That is not the solution here.
You are experiencing this issue because your Logo and Navigation won’t fit in the screen. Here are your options:
You can reduce the Navbar font size Links – Text
Please reduce them until they don’t break.
Thanks.
Thanks Christian, that did work but the menu items become too small, and we now run into a readability issue. We have decided to shorten the names of the menu items. But before we do that, I wanted to try one last option…
Is it possible for the pt size of the words in the menu items to shrink with the window? I know in HTML you can apply a percentage instead of a specific pt size to an object, this way the size will adjust based on the screen size.
Is this possible with the X Theme?
Thanks!
Adriel
Hello Adriel,
Thanks for updating in! You can use pt via custom css instead. Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)
body .x-navbar .desktop .x-nav > li > a{
font-size: 18pt;
}
body .x-navbar .mobile .x-nav > li > a {
font-size: 14pt;
}
We would loved to know if this has work for you.
Hey @RueNel, adding that code didn’t work, but thank anyway. We will reduce the amount of letters/words in the main nav menu.
Thanks again for all the help, much appreciated!
Adriel
Hi Adriel,
This particular situation is simply a matter of reworking your content to properly fit the physical limitations presented by the theme (this is a consideration that must be taken into account with all themes and designs). It is the same principle applied to filling up a room with furniture – there is only so much that can fit into a given space. The following should be considered in these situations:
Logo Size – longer logos will conflict with navigation items as you size your site down. If you are noticing a conflict, you may need to implement some CSS to size down your logo as viewports get smaller.
Shorter Names – you should always shoot to have your top-level navigation links be as simple as possible. For example, if your link is “Learn About My Company,” Try using “About” instead. It conveys the same idea and will save you a ton of real estate.
Rearrange – sometimes we want to put all of our links in the top-level navigation, but not all pages are created equally. Pages of lesser importance that pertain to a parent link might work well as a sub-menu instead.
Less Links – even on more “complex” websites with lots of pages, there are always ways to combine information together to make things simpler, which also ensures that your user doesn’t have to click around for every granular piece of information. For example, you might have two top-level links called “About” and “Contact,” which could possibly be combined into one. This eliminates the need for extra links and makes things much simpler for your users to navigate. Less is more in information architecture.
Appearance – fortunately X features plenty of options for adjusting the appearance of elements throughout your site, and the navbar is one of the more flexible elements. Try using a smaller font size if possible to save on a little real estate.
Thanks
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.