Title's not working correct

Support
#1

When you visit one of our blog posts on a desktop / laptop part of the title is cut off. You can view this here: https://hopestory.org/37-year-old-man-with-down-syndrome/1

Can you please help me correct this? Thank you!

It looks like this may also be happening on other pages as well.

Thanks!

#2

Hi Rick,

Thank you for reaching out to us. I checked your site and I see you’ve many menu items which drops down to next line which then covers your title in small screens. This particular situation sounds like 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.

Alternatively (not a good practice) you can use the following CSS code in the Theme Options > CSS to adjust the menu items in problematic screens:

@media screen and (min-width: 980px) and (max-width: 1400px) {
    .x-navbar-static-active .x-navbar .desktop .x-nav>li>a>span, .x-navbar-fixed-top-active .x-navbar .desktop .x-nav>li>a>span {
        margin: 0 !important;
        padding: 0 !important;
    }
    .x-navbar .desktop .x-nav > li > a {
        font-size: 14px
    }
}

Hope this helps!

#3

Thank you for your reply. I don’t know how I can reduce the menu items, they all seem pretty important? Do you have any suggestions?

Also, why is using the CSS to allow things to display properly not a good practice? (I don’t know what I don’t know) so I’m interested in any helpful information you have.

Thank you!

#4

Hello Rick,

Thanks for updating the thread.

You can try adding the CSS shared above by my colleague.

Sometimes custom CSS tend to break the functioning of website if the code is not maintained. However, if the code is maintained properly then it should not create any issue.

Thanks.

#5

Your company is the one that creates the code, right? So I’m assuming the code should be maintained.

Also, do you have any suggestions on how to make the menu items cleaner?

#6

I added this CSS but I’m still seeing this. Did I do something wrong?

#7

Hi @rick4him,

The custom CSS is working:

Can you please delete this http://hopestory.org/donation/ from your custom CSS section and add the provided CSS again?

Let us know how it goes!

#8

Thanks, I removed that but I’m still seeing this.

#9

I also removed the “SHOP” menu item…I’m not sure that helped though.

#10

Hey Rick,

That’s how far the CSS can go as I mentioned before the CSS way is not a good practice in this situation as you’ve many menu items and catering all screen sizes with CSS is not good at all so the best way is to rework your content to properly fit the physical limitations presented by the theme.

Alternatively you can show the mobile menu when the menu breaking occurs if you can’t adjust your menu items, to do this you simply use the following CSS code:

@media screen and (max-width: 1350px) {
  a.x-btn-navbar {
    display: block;
    float: right;
  }

  nav.x-nav-wrap.desktop {
    display: none;
  }
  .x-nav-wrap.mobile:not(.x-collapsed) {
    display: block !important;
  }
}

You can also checkout the Superfly and Ubermenu extensions in this case.

Hope this helps!

#11

Hi. I’m a little confused. You said to put the CSS in there, but the CSS doesn’t change to fix the issue. I also took off a menu item and it still isn’t working…

It doesn’t feel like I have that many menu items (especially after taking out one)…can you please help me figure out the best way to make this work?

I would like to be able to make things display correctly regardless of the screen.

Thanks.

#12

Hi Rick,

The font size is still 16px,

.x-navbar .desktop .x-nav > li > a{
font-size:16px;
}

Please make sure it’s set to 14px as recommended. But that will only fix it for some devices, any device greater than 980px will have the same issue. That’s because of the total width of the logo and menu should be 980px to fit them in line.

Logo width: 200px;
Navigation width: 1066px;

It’s a total of 1266px and too large to fit on 980px. Even the navigation alone is big, even by removing the logo isn’t fit enough, the menu items will start to break into next lines once you resize it or view it below 1023px. That’s quite a very long header and the only solution is removing the logo and changing its font size to about 13px to make sure the items won’t break above 980px but below 1024px, or just remove some menu items and make them a dropdown menu :slight_smile:

Thanks!

#13

Thanks. I wouldn’t want to remove my logo. That’s pretty important. From what I understand drop down menus aren’t really the best user experience. Is that correct?

#14

Hi Rick,

Drop down menus are pretty common and being used by thousand of sites. It may not be the best option but I would say that it is necessary in your current situation. As my colleagues have stated your menu does not fit the allowed space.
Your only other option here as you would not like to remove some of your menu items is to make the mobile button appear earlier. To do that, you can add the code below in Theme Options > CSS

@media screen and (max-width: 1324px) {
  a.x-btn-navbar {
    display: block;
    float: right;
  }

.x-nav-wrap.desktop {
    display: block;
}

.x-nav-wrap.mobile {
    display: block;
}
.x-nav-wrap.mobile.x-collapsed {
    display: none;
}
}

Thanks

#15

Thanks. I have gotten several pieces of advice, can you please share what the best option is?

Thanks

#16

Hello Rick,

The best options is to minimize your menu items. You adjust and have a parent and child menu items to make sure that there is enough space to display the menu items in your navbar.

Regards.

#17

I have already removed the “SHOP” menu item and it’s still not working? Do you have any suggestions on what to remove / combine?

#18

Hello Rick,

Thanks for updating the thread. :slight_smile:

I think Contact Menu can be moved under About Us. Existing Parent and New Diagnosis can be clubbed into a single menu item.

Thanks.

#19

Thanks. Quick question. Is the top level menu item clickable, or is that a word and the two menu items go under that…if that makes sense?

#20

Hello Rick,

Thanks for updating the thread.

You can have a common word that would resonate with the sub menu items and the two menu items can go under as sub menu. You can have a non linkable top menu item. You can take a look at following tutorial for more information .

https://wpexplorer-themes.com/total/docs/adding-non-clickable-menu-links/

Thanks.