• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Change text-align in navigation menu

Home › Community Forums › Epik Theme Support › Change text-align in navigation menu

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

  • This topic has 10 replies, 2 voices, and was last updated 8 years, 10 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.
Log In

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2022 · Appfinite · Built With The Genesis Framework