Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   [SOLVED] Centering menu titles vertically & placing a dot/asterisk/icon between menu (http://forum.bytesforall.com/showthread.php?t=14781)

hnbrace Jun 27, 2011 10:39 AM

[SOLVED] Centering menu titles vertically & placing a dot/asterisk/icon between menu
 
1 Attachment(s)
I found a post on how to have 2 lines of text in the menu. Is there a way to center my single line title vertically? Also can I place a dot, asterisk, or some sort of icon between my menu titles? I have tried to attach a picture of what I am trying to accomplish. My website is expealidocious.com
Thanks.

lmilesw Jun 27, 2011 11:54 AM

The only way I can think of is to put something like the following in the WordPress navigation field for the menu item which will put padding on the top and bottom. You will just have to tweak the padding for you situation.
HTML Code:

<div style="padding: 7px 0;">Blog</div>

hnbrace Jun 27, 2011 12:31 PM

Thank you that worked for the vertical centering. Is there way to add dots or an icon in between the title text?

lmilesw Jun 27, 2011 02:07 PM

You probably won't like this but it works. For items with two lines perhaps something like this in the navigation field and tweak the top position as necessary
HTML Code:

Meet <span style="position:relative;top:5px;"></span><br />Heather
For items with one line it is easier with something like this.
HTML Code:

<div style="padding: 7px 0;">Shop •</div>
The dots are created by holding down the Alt key, hitting 7, and releasing the Alt key. There are html codes for dots and other symbols as well and you could even add an image.

hnbrace Jun 27, 2011 05:07 PM

Thanks for taking the time to post that but you were right, it didn't look so great. Would you happen to have any other ideas for giving more space between the menu titles? I have had a few people say it looks like the titles run together. I don't particularly like the vertical lines in between but I might have to go that route. Thanks

lmilesw Jun 27, 2011 06:06 PM

You could try this in ATO>Add HTML/CSS Inserts>CSS Inserts
HTML Code:

#rmenu2 li {
    border-left: 1px solid black;
    border-right: 1px solid black;
    padding: 0 10px;
}


hnbrace Jun 28, 2011 01:27 PM

I was really hoping to avoid using the vertical lines. I thought I had it figured out using this

#rmenu2 li {
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
padding: 0 15px;
}

Which looks great but when I hoover my mouse over the link it doesn't look as nice because the padding is a different color and there is a the white border shows between. Is there a way to add the space without the look I am getting when I hoover over the title links? Under the ATO>Menu 1 there is only an option for the width of the sub menus. I do appreciate your time and help.

lmilesw Jun 28, 2011 01:38 PM

Sorry... change padding to margin

hnbrace Jun 28, 2011 04:07 PM

THANK YOU! This works.


All times are GMT -6. The time now is 12:48 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.