Main Navigation
-
My website is http://www.nrengineering.com
I worked with a CSS expert through WordPress to make sure all the buttons on my main navigation worked properly and were sized well.
For some reason, the titles under “Our Work” are blurring incorrectly.
I was told my CSS was a bit disorganized. However, everything has looked good for over a year, and I’m not sure why there are suddenly issues.
Can someone help me?
-
Hi there, can you explain a bit further what you mean by this?
For some reason, the titles under “Our Work” are blurring incorrectly.
I’ve looked at the submenu items under Our Work and I’m not able to tell exactly what you mean.
-
hi!
Example: Under “Completed Work”, there is a tab for “Physiological Mathematical Modeling”. The “Modeling” however is being moved over to the next column and I’m not sure why.
Does that help?
-
Ah, thanks. Not sure why this changed, but add this to the very bottom of your custom CSS. It forces it to stay together and in so doing, it goes to the top of the right column.
#menu-item-769 { display: flex; } -
That unfortunately didn’t work. I have uploaded a screen shot to my Media Library for you to see what happened. Any other suggestions?
-
Hi, sorry about that. I took a look at your custom CSS in your customizer and found a number of orphaned opening and ending curly brackets which were causing issues. I’ve removed those from your custom CSS. When you are removing CSS, make sure and get the ending curly brackets. If one is left in, it causes a syntax error and it can prevent any CSS below that from being applied to the site.
Safari and Chrome seem to not work with that, but Firefox does. Let’s instead use inline-flex, which seems to work fine in all browsers. Add this at the very bottom of your custom CSS.
#menu-item-769 { display: inline-flex; } -
Hi!
That worked perfectly. Thank you!
Do you mind explaining to me what an inline-flex is? I’m doing some basic training on CSS and want to learn as many terms as I can!
-
Flex and inline-flex are new in CSS3. Flex will display the item it is applied to as a block level container, which means that everything in that element is sort of “contained” and kept together.
Inline-flex is similar in that the element is block level, but that block is displayed inline with other elements.
It’s interesting that Firefox gave the desired result using only “flex” whereas Chrome and Safari didn’t, which means there is a difference in their interpretations of flex. The web is permanently fickle. :)
Luckily changing it to inline-flex didn’t cause Firefox to “do it wrong”.
-
-
- The topic ‘Main Navigation’ is closed to new replies.
WordPress.com Forums 