Hello!
I’m trying to make the area of the links in a header wider. Is there any way to do it? Maybe I could make the margin of the header element wider globally through CSS?
I would also like the links not to break into two lines as the window size decreases. Just go into a mobile menu button or maybe make the font smaller.
Just an off-topic question: Is global CSS overwriting page CSS or is it the other way around?
Thanks!
Hi Robert,
You can adjust links spacing and font size under Theme Options > Header > LINKS – TEXT and
Theme Options > Header > LINKS – ALIGNMENT
With regards to links not breaking, 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 some space.
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 space.
Thanks
Hello,
thank You for Your reply, but that’s not what I was looking for.
The links fit on one line on most screen sizes, they only break into two when very close to the transition to mobile menu button. I just want to either make their size responsive, make the breakpoint appear faster or make the margin bigger. Not the margin of the links themselves, but the area that they are in.
I have played around with the Theme Options before posting here and was unable to get the result I wanted. And I’m afraid it’s impossible to decrease the amount of link elements in the header menu.
Thanks again for the reply!
Hello Robert,
Thanks for updating the thread. 
Ideally it’s not recommended but if you would like change the breakpoint, you can take a look at following resource. Please note that it will fall outside the scope of support we can offer.
Thanks.
Thank you, I’ll play around with the code and see what I can get
You’re welcome!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.