re-arrange menu
-
I need help with rearranging the menu on my site.
1.I’ll like to make the height of the menu area smaller, reducing the space between the 3 lines of the menu
2. I’ll also like to have the “light unto my path…” menu be the only one at the center, and thus bring the “let’s pray some” menu down to the 3rd line.
Kindly help with the css to effect this change. thanks
bimboamole.orgThe blog I need help with is: (visible only to logged in users)
-
1.I’ll like to make the height of the menu area smaller, reducing the space between the 3 lines of the menu
I reviewed http://bimboamole.org/ and I found that you have actually made the overall height of the menu taller and the line height (spacing between lines) smaller with this custom CSS:
.navigation-main .menu { max-width: 100%; height:110px; line-height:.345em }To make the height of the menu container (the white part) smaller, you can remove this line from your custom CSS:
height:110px;Then to reduce the space between lines, you can reduce the height of the links inside the main menu. Here is an example:
.navigation-main a { line-height: 1.5em; }Adjust the 1.5em value as needed.
-
2. I’ll also like to have the “light unto my path…” menu be the only one at the center, and thus bring the “let’s pray some” menu down to the 3rd line.
You can use the ID value for the menu item to target one specific item at a time. I checked the page source for your menu using this method http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/ and I found that the “Let’s pray some” menu has an ID of “menu-item-619” and that means you can target it by putting “#menu-item-619” at the front of CSS selectors.
The closest I could get to modifying a menu item inside a list of menu items is to make “Let’s pray some” display on its own line completely:
#menu-item-619 { display: block; }I couldn’t figure out a way to force a line break before it and also have the other items follow on the same line.
-
thanks a lot, designsimply. Georgeous.
What if I wanted to make only the “Light unto my path…” menu stand on the 2nd line, bringing down the “let’s pray some” to the third line?
Furthermore, is there a way to highlight one of the menu (e.g the “light unto my path”) in some special colour or effect?
thanks, grateful -
What if I wanted to make only the “Light unto my path…” menu stand on the 2nd line, bringing down the “let’s pray some” to the third line?
Let me show you how to find the right selector:
https://cloudup.com/cLAjSCQrI5B (58s)You can add a color effect into the same block of CSS. Here is an example to get you started:
background: yellow;Besides background, there are other effects you can do such as “color” to change the text color.
You might like this tutorial if you are learning CSS:
http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1?curriculum_id=50579fb998b470000202dc8b -
Wao! that’s just splendid!! thanks for the links too, Im trying to study them.
I got to know how to make only the text of the menu change colour rather than the whole line. I’ll get to that hopefully.
So grateful dear! -
-
Try adding a new rule with “#menu-item-1999 a” as the selector and add the background color of your choice to it.
-
hi designsimply,
im having trouble with that “let’s pray some” menu. I had included some drop down links within it, and usually one could click on the links. But now it drops down but one is not able to select/click on it. Sure there must be a way around that. so much thanks. -
Ah, I see now that the line-height adjustment on the menu links is causing too big a gap between the main menu item and the submenu. Try adding this to bring them closer together again:
.navigation-main ul ul { top: inherit; } -
Amazing! Thanks. My headache is I just don’t know how you figure that out! wao! thanks ds.
-
-
Hi ds. Here I am again :)
I wanted help with clearing the unnecessary space between my post and the menu items above. If you look at my latest post, that would be obvious. I wanted to bring up the content of the post itself at least to the line-level of “To all women”
thanks. -
Hi, the title element for “To all women extends to the right side of the post type icon so that if you have long titles, they will have room and not be bunched up on the left above the date. You can see what I mean if you look at the next post below, “The change Nigeria…”
If we move the content up, and any subsequent post has a longer title, it will be bunched up on the left. We could target that particular post by post ID, and use a media query to limit the change to only certain widths, but this would only effect this post. Any subsequent posts with short titles would require a new CSS rule for that new post.
-
Hi sacredpath, nice to have you here.
I see what you mean now. Okay, help me with the css for this post and hopefully I could always alter the post id for subsequent posts?Better still, can’t one bring the post to be just a line below the title of the post (like permanently) since the title of my posts usually are just of one line? That serves for subsequent posts too. If there was any need for a longer title I could always reverse that.
thanks sp -
Add the following at the bottom of your CSS. It uses a media query and will do the adjustment for screens/windows wider than 1032px, which is when the title starts to overlap the content due the the reduction in width on the meta data section on the left. Let me know what you think.
@media screen and (min-width: 1032px) { #post-2442 .entry-title { max-width: 240px; } #post-2442 .entry-content { margin-top: -40px; } } -
Hi SP. Thanks, sorry for the late reply.
I tried it but there wasn’t any change whatsoever.
Not to worry, maybe I’ll just keep it as it is.
Im grateful sp. thanks. -
Hmmm, works for me in Firebug in Firefox, but once in a while that fails. If you wish to revisit this, let me know.
-
- The topic ‘re-arrange menu’ is closed to new replies.
WordPress.com Forums 