Home › Community Forums › Epik Theme Support › Change text-align in navigation menu
- This topic has 10 replies, 2 voices, and was last updated 8 years, 10 months ago by
Eric.
-
AuthorPosts
-
August 16, 2013 at 7:29 am #6588
Hashim
CustomerHi 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 #6604Eric
CustomerI’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 #6616Hashim
CustomerDear Eric,
Thank you for responding!
This is the website:
I’m looking forward to your reply.
Regards,
Hashim
August 19, 2013 at 12:09 am #6644Eric
CustomerThere 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 #6650Hashim
CustomerThank 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 #6661Eric
CustomerYou 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 #6667Hashim
CustomerDear 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 #6681Eric
CustomerI 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 #6782Eric
CustomerYou 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 #6810Hashim
CustomerYes!!! 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 #6854Eric
CustomerThe 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
-
AuthorPosts
- You must be logged in to reply to this topic.