Menu Items: Removed dots now need more space between
-
I removed the dots between the primary navigational menu items (Home, About, Services, Contact) but need to add some space because they’re too close together. Should be a simple fix but I can’t find it.
-
Hi there! Working on atimeforallthings.com, right?
You could add some padding to one side of the links in your menu to space them out, like this:
.main-navigation .menu li { padding-left: 10px; }
Or if you liked the spacing of the dots, you can add them back in and use
visibility: hidden;
to hide the dots but leave them there unseen (leaving the space they take up in place while not actually seeing them there).Let me know if you have any questions! 🙂
Adding them back in seems best but I forgot how I took them out… Shame on me!
Thanks, Sarah!
You’re welcome! I see them there now, so maybe you’re all set to play around with hiding them/adding spacing? Let me know if you’re still wanting to make any adjustments to the dots/spacing there and I’ll take a look. 🙂
Hi Sarah ~ If you’re looking at the website please don’t pay any attention to the changes. Since I’d made several changes and could not remember why, when, or how I made the changes ~ I deleted and pasted the css edits into a Word.doc table. I copied before and after print screen imgages and developed a documentational log for reference. I will probably paste the css changes back in but they will be in order of the theme’s elements with some other minor changes. I know it may seem anal, but I have a Type A personality! Thanks for keeping up with me!!!
Ah, okay. 🙂
I still see the dots, so since they’re back right now, if you like the spacing (but don’t want to see the dots), you could add this CSS to your child theme’s style.css file or a CSS editor (like the one added using Jetpack’s Custom CSS module):
.main-navigation .menu li a:after { visibility: hidden; }
Thanks for the quick fix! I was determined to figure it out myself but the fix got placed on my back burner!! Please take a look at my site again. I’ve created a background image with the colors of my logo but the Masthead/Site-Branding goes to the top of the page. I’d like the background above as well so it looks like a uniform border.
You mean you want to shift the content (including header) down from the top a bit so your background image shows around the top too?
Try this CSS:
.page { padding-top: 30px; }
Change the 30 to whatever works for you.) I checked it out and it seemed to do that well… let me know if you add it and see anything odd going on. 🙂
I looked forever for that fix! Tried editing in Firebug to find temporary fix but it didn’t do the trick in CSS Editor. Currently researching how to place the background image in the Masthead/Site-Branding with some opacity before adding in the Logo which I plan to place far left with text to far right. Hope I’m not asking for too much!!!
Glad it worked!
Will take a look at the masthead/header area questions on your other thread:
https://wordpress.org/support/topic/logo-as-background-image-with-text-below?replies=4#post-8382696
- The topic ‘Menu Items: Removed dots now need more space between’ is closed to new replies.