[topriesParticipant]

Hi there,

I use the latest cornerstone, x theme and wordpress update.
my website is saffraancatering.com

i have a qeustion regarding my navigation menu. The navigation elements are of center on their own, and the whole menu is also left align i geuss, while i have center align on. So i need 2 fixes…

1st
i want the navigation elements on theirself to be center alignt, i attached a picture so you can better see what i meant. As you can see A is smaller then B. see menu.png

2nd
the whole menu centers weird, for example its centered for the phone menu, but when you adjust the screen size to something like 980×1280 and the menu gets stacked, because its to long, the 2nd row is not center alignt but left alignt. And here there is also a third problem, when the menu gets stacked, it doesnt push down the page, but just covers it, and therefore hides the conent underneath it, again i made a screenshot for you see menubar.png.

[topriesParticipant]

the file was to big, i resized it and reattached it

[LelyModerator]

Hi There,

Thank you for the screenshot.
1.) Upon thorough checking, the issue is because of the letter spacing you have added on custom CSS:

.x-navbar .x-nav > li > a {
    color: #D3A356 !important;
    font-family: "Cinzel","Helvetica Neue",Helvetica,sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 10px !important;
    font-size: 12px !important;
    text-align: center !important;
}

Please try to remove this line letter-spacing: 10px !important; from above custom CSS the check again.

2.)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.

Although, on your site, the main source of the issue is this line letter-spacing: 10px !important; from #1 above. Adding too much space between letters will require more space to display the menu in just one line thus is it will go to second line. Please check again after implementing suggestion on #1.

Thanks!

[topriesParticipant]

yes but i want the look i get from letter-spacing: 10, i dont want it to be normal. But i can live with that flaw, the bigger problems are the ones explained in ”2nd”

the whole menu centers weird, for example its centered for the phone menu, but when you adjust the screen size to something like 980×1280 and the menu gets stacked, because its to long, the 2nd row is not center alignt but left alignt.

And here there is also a third problem, when the menu gets stacked, it doesn’t push down the page, but just covers it, and therefore hides the content underneath it, again i made a screenshot for you see menubar.png.

[RadModerator]

Hi there,

Stacking will always happen when the total width of the menu is greater than 980px. It’s currently at 1155px width, this width is optimized for a bigger screen only.

Breakpoint is around 979-980px in which mobile menu will start to display. But since your menu width is bigger than the break point, then it will start stacking until it reaches the breaking point.

The solution would be is reducing your menu items, its font-size, or spacing to accommodate the 980px width.

Your menu covers the relative content since it’s stacked while it’s fixed position. The initial height of menu is based when it’s not yet stacked (can be change through customizer). But since stacking is dynamic depending on screen’s width, then the height changes too and covering the other elements. The solution is of course, prevent the stacking by removing some items or spacing.

Thanks!

[Author]

Posts