Change text-align in navigation menu

Tagged: alginment, border, menu, nav, navigation, text

This topic has 10 replies, 2 voices, and was last updated 11 years, 3 months ago by Eric.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
August 16, 2013 at 7:29 am #6588
Hashim
Customer
Hi there,

I’ve been trying to adjust the alingnment of the text of the menu items from left-alignment to center-alignment using Genesis Extender. But somehow none of the changes I make seem to work. Do you know what prevents the changes and how I can get this to work?

Thanks in advance!

Regards,

Hashim
August 16, 2013 at 10:39 pm #6604
Eric
Customer
I’m not familiar with the Genesis Extender so I wouldn’t be able to help with that. But if you can post a link to your site I can take a look at the menu itself and see if there’s something that can be done manually through css.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
August 17, 2013 at 4:15 pm #6616
Hashim
Customer
Dear Eric,

Thank you for responding!

This is the website:

http://www.aziemafatima.com

I’m looking forward to your reply.

Regards,

Hashim
August 19, 2013 at 12:09 am #6644
Eric
Customer
There is padding on the right but not on the left. So look in your css around line 1015 and remove the “0”
```
#nav .genesis-nav-menu a {
	padding: 14px 20px 14px 0;
	padding: 0.875rem 1.25rem 0.875rem 0;
}
```
Like this –
```
#nav .genesis-nav-menu a {
	padding: 14px 20px 14px;
	padding: 0.875rem 1.25rem 0.875rem;
}
```
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
August 19, 2013 at 4:29 am #6650
Hashim
Customer
Thank you Eric,

I’ve been struggling with this for so long, and you really helped me out! Thanks a lot!

I hope you can help me out with another menu-issue. I’d like to have small vertical lines between the menu items in the header. And I’ve been trying to do that with borders. The problem is that if I place a right border for the menu items, I also get a vertical line at the end of the menu while the end right side shoudn’t have that line and similar with the left border.

Do you know how to get vertical lines between the menu items without having those lines on the far left and far right sides of the menu? Also it’d be great of the menu in the header could be centered vertically. It seems a little too near to the top as it is right now. Do you know how to do that?

Thank you in advance!

Regards,

Hashim
August 19, 2013 at 9:22 pm #6661
Eric
Customer
You can try adding a bottom border to line 1125 –

#header .genesis-nav-menu ul li a,
#nav .genesis-nav-menu ul li a,
#subnav .genesis-nav-menu ul li a

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
August 19, 2013 at 9:51 pm #6667
Hashim
Customer
Dear Eric,

Unfortunately that didn’t work. I tried adding the border as you suggested. I tried it again with left and right borders. But without success.

It should look something like this:

menu1 | menu2 | menu3 | menu4

I’ve tried using borders but the problem is that the far left and far right sides of the menu shouldn’t have a border. When I add a right border, the right border also appears at the far right which is something what shouldn’t happen. Same goes for the left border.

Do you think you can help me out with this?

Thank you in advance!

Regards,

Hashim
August 21, 2013 at 11:30 am #6681
Eric
Customer
I thought you were referring to the menus in the dropdpown. For the menu links up top, you can add something like this –
```
.menu-primary a {
    border-right: 1px solid #fff;
}
```
and of course you can change the border to however you want it to appear.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
August 24, 2013 at 10:24 pm #6782
Eric
Customer
You can directly remove the borders on the end of the menu by adding the menu ID and adding border: none;

Here is an example –
```
.genesis-nav-menu .menu-item-792 a {
    border: none;
}
```
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
August 25, 2013 at 3:36 pm #6810
Hashim
Customer
Yes!!! It worked!

Thank you so much, Eric!

Just one final question to get it just right.

The borders are just a little bit too high. It’d be nice if the text in the menu items can be vertically centered to the height of the border. I know that’s impossible and that the best way to do that is adjust the size of the menu item.

Do you know how I can adjust the size of the menu items so that the borders become a little a bit smaller?

Thank you in advance!

Regards,

Hashim
August 26, 2013 at 10:24 pm #6854
Eric
Customer
The border will stretch to the top and bottom because of the padding. you could try changing it to margin instead and see if that helps. Of course you’ll have to make some adjustments to get it looking how you want. Try looking around this – #nav .genesis-nav-menu a

Hope this helps.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.