[pforastieroParticipant]

Hi! I had my nav bar and site looking great on my widescreen laptop with a font size of 16. But when I switched to a square monitor it narrowed my nav to the point where the About Us fell off and was wrapping under. To get this to look right, I needed to reduce font size to 13.

My question is can I add something to the CSS that would allow the nav font to be responsive between 13 and 16 so I can have the look I want on the larger resolutions. And how do I do that.

I would want to do the same with the subnav.

Thanks.

[pforastieroParticipant]

This reply has been marked as private.

[DarshanaModerator]

Hi there,

Yes, you can set font sizes for different screen sizes. Follow the example below and add it into your Customizer, Custom > CSS section using the menu Appearance -> Customize. You can change the values according to your requirement.

@media (max-width: 240px) {
    .x-navbar .x-nav > li > a {
	    font-size: 13px;
	}

	.x-navbar .sub-menu a {
	    font-size: 13px;
	}
}

@media (max-width: 320px) {
    .x-navbar .x-nav > li > a {
	    font-size: 14px;
	}

	.x-navbar .sub-menu a {
	    font-size: 14px;
	}
}
@media (max-width: 480px) {
    .x-navbar .x-nav > li > a {
	    font-size: 15px;
	}

	.x-navbar .sub-menu a {
	    font-size: 15px;
	}
}

@media (max-width: 768px) {
    .x-navbar .x-nav > li > a {
	    font-size: 16px;
	}

	.x-navbar .sub-menu a {
	    font-size: 16px;
	}
}

Hope that helps.

[pforastieroParticipant]

I added this code, but I don’t see anything change and I narrow my browser. That should be a good way to test, right? or do I actually need to adjust my screen size each time.

http://vvcap.net/db/b0S4xZHV0_Jj6lbP964R.htp

Also how do I hide the revolution slider on screens too small to read it (e.g., on my iphone).

Thanks

[ZeshanMember]

Hi there,

Thank you for writing in!

It seems you wish to target the desktops too. While the above given CSS is only for smaller devices, you need to add following CSS too to target desktops:

@media (min-width: 980px) {
    .x-navbar .x-nav > li > a {
        font-size: 13px;
    }
}

Just replace 13px to your desired value.

Hope this helps. 🙂

Thank you.

[pforastieroParticipant]

Hi! I added this and it made the font size bigger but the font size didn’t change to smaller again when under the 980px, it wrapped and then went to the dropdown menu.

[Nabeel AModerator]

Hi there,

Use this code instead:

@media screen and (max-width: 1245px){
.x-navbar .x-nav > li > a {
font-size: 13px !important;
}
}
@media screen and (max-width: 1110px){
.x-navbar .x-nav > li > a {
font-size: 12px !important;
}
}
@media screen and (max-width: 1045px){
.x-navbar .x-nav > li > a {
font-size: 11px !important;
}
}

This should resolve the problem. Let us know how this goes!

[pforastieroParticipant]

This reply has been marked as private.

[pforastieroParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

It seems, you’re having a lot of custom CSS in your website, unfortunately, we cannot provide support for checking the errors in the CSS. However, I would advise not to using the above provided code as it’d be confusing now, and instead using following code by adding it either at the top of Custom > CSS in the Customizer, or in your child theme’s style.css file:

.x-navbar .x-nav > li > a {
    font-size: 13px !important;
}

@media screen and (max-width: 1245px){
    .x-navbar .x-nav > li > a {
        font-size: 12px !important;
    }
}

@media screen and (max-width: 1110px){
    .x-navbar .x-nav > li > a {
        font-size: 11px !important;
    }
}

@media screen and (max-width: 1045px){
    .x-navbar .x-nav > li > a {
        font-size: 10px !important;
    }
}

You can adjust the font sizes as per your needs in each media query or for desktop styling.

Please note that, further customizations from here would be getting into custom development, which is outside the scope of support we can offer. As 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 principal 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.

If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

[pforastieroParticipant]

It worked great adding to my style.css file. Thanks!

[ZeshanMember]

You’re welcome! 🙂

[Author]

Posts