Title's not working correct

Support
#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.

#21

That does feel like the best menu option. I don’t feel like I have many menu items. I’m a little confused as to why this theme won’t work with the number of menu items I have. What is the solution without doing drop down menus?

#22

Hi Rick,

The theme has responsive layout that works on most devices, but the break point between desktop menu and mobile menu is 979px. So what I suggested fitting them on 980px is based on that break points. Is the same as 4 columns collapsed to 1 column when viewed on smaller view, the columns goes under the same way the menu items will. But if you wish to have more flexible option then how about installing Ubermenu and use it as your main navigation? Please check it here https://theme.co/apex/forum/t/extension-ubermenu/75

Thanks!

#23

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.