Cutoff before dropdown menu appears

Support
#1

Hi again guys,

just trying to get a minor problem with my header nav sorted.

I want it to cut off a little bit sooner as the width shrinks (and the burger menu appear) a bit sooner, before the words start disappearing or dropping off the header and into the content.

Any help (or perhaps an alternative idea?) appreciated. :slight_smile:

#2

Hello @Naishster,

Thanks for asking. :slight_smile:

I believe you are looking to change the viewport settings for navigation. Unfortunately, changing viewport setting is something we don’t recommend as it creates lot of issues going forward. More so it falls outside the scope of support we can offer.

I am sharing few tutorials that you can take a look should you wish to make the changes.

https://www.w3schools.com/css/css_rwd_viewport.asp
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Thanks.

#3

Sorry, not sure what that means.

I know there is a setting somewhere in the global headers to make the nav menu disappear and the hamburger menu appear at specific widths. Just really looking for that.

#4

As an example, if I look at the site on my ipad when it stands upright, the hamburger appears and all looks good.

If I turn my ipad widthways it looks terrible because the normal navigation is overlapping.

Mainly happens when you scroll down as the header height changes slightly.

#5

Hello @Naishster,

Thanks for clarifying. :slight_smile:

I am sorry for the confusion, actually I thought you were looking for change the responsive nature to navigation.

To make the necessary changes, you need to edit the header and then open the navigation element under Customize > Hide During Breakpoints make the necessary selection.

Thanks.

#6

Hello @Naishster,

Looks like you updated the thread. Can you please share some screenshots of the issue you are facing upon turning website landscape mode? I tested on my end and can’t seems to replicate the problem.

Thanks.

#7

Coming up…

#8

Hi @Naishster,

Looks like your menu is fitted to the bigger screen than smaller screen of a desktop. There are many different dimension when it comes to the desktop screen. If you fit it on 1600px width then it may overflow on 1024px desktop screen. The 1024px is a desktop and tablet resolution, it’s the boundary between them. I recommend fitting your desktop menu about 980px since the mobile menu starts to appear on that size.

I tried minimizing the items through CSS but no luck, it’s too wide. The only solution is minimizing the items, or use custom CSS to hide items when it reaches certain width. Or custom CSS to change logo’s dimension, just to make sure it fits on 980px. But since it’s crowded horizontally, it would be hard.

Thanks!

#9

Would just using a smaller width logo do the trick? @Rad

#10

Hi,

Yes that would help but still needs more adjustment.

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.

Thanks

#11

Thanks for the good info @paul.r, managed to get it pretty much sorted.

The last thing is that the logo snaps to the left side once the break point is hit. Can I change something so that it stays centered?

#12

Hey There,

Could you please share us with your admin account so we can take a closer look at your headers?

Thank you.

#13

Added as secure note. Thanks.

#14

Hello @Naishster,

Thanks for updating the thread.

Add a class name (ex logo-align-responsive) to your Container under Container > Customize > Class. After that add following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 979px) {
    .logo-align-responsive {
    display: contents;
}
}

Let us know how it goes.

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.

https://www.youtube.com/watch?v=MFR4WXiLzpc

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/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#15

Hi @Prasant,

I added that exactly, didn’t do the trick however. Left the code in place so you could take a look if you don’t mind?

#16

Hello There,

Please edit your custom header and in the bar settings, please make sure that it is set to center, center.

Please let us know how it goes.

#17

Lovely, worked perfectly thanks. :slight_smile:

#18

You’re welcome. Glad we could help.

#19

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