WordPress.org

Ready to get started?Download WordPress

Forums

Frontier
[resolved] How to center my navigation bar/menu (frontier theme) (17 posts)

  1. Ian Schoonover
    Member
    Posted 6 months ago #

    Hello all! If any one could so kind as to assist me with an issue I'm currently having, I'd greatly appreciate it. I'll try to reference everything with the correct terms, but please forgive me if I get some of my descriptions wrong.

    The website is http://www.lawlerh2o.com/wp

    I would like to center the entire horizontal menu within it's DIV by using CSS or any other solution that is probable.

    I was actually able to center it by using the 'margin-left: NNpx;' method, but the only problem is when viewed on a mobile device, the entire menu is pushed to the right.
    I've tried to do 'margin: auto', but this hasn't worked for me either.

    ..another thing the client wants, is for the menu items (li) to all have the same width, i.e., 'Project Highlights' being the longest item, all the other list items would be the same width.

    .. and last, but not least, within the submenu for 'Services' there is 'construction management' and 'engineering support services'
    where would I go to adjust the widths of the submenu items to contain the entire length of the text on one line, rather than two as it is now.

    Any thoughts/ suggestions would be much appreciated!
    Thank you,

    Ian

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 6 months ago #

    See http://www.w3.org/Style/Examples/007/center.en.html

    To avoid setting a width on the menu try displaying it table.

    E.g,

    #menu-leg_menu {
     display: table;
     margin: 0 auto;
     /* Override the float */
     float: none;
    }

    Do you have a section of the dashboard to hold your CSS modifications?

  3. Ian Schoonover
    Member
    Posted 6 months ago #

    I'll try some of those techniques from the link you referenced, but doesn't that only apply to text within an item or can it apply to the 'ul' as a whole also?

    I'm not sure what you're asking in the last question? Like a child theme?

  4. ronangelo
    Member
    Theme Author

    Posted 6 months ago #

    @iantskon

    I'll try some of those techniques from the link you referenced, but doesn't that only apply to text within an item or can it apply to the 'ul' as a whole also?

    The code he posted above does exactly what you're looking for. You may also want to add this to put it at the exact center.

    #menu-main {padding-left: 0;}

    ..another thing the client wants, is for the menu items (li) to all have the same width, i.e., 'Project Highlights' being the longest item, all the other list items would be the same width.

    .menu-main li a {min-width:120px;}

    Of course you'll have to change the min-width to match your longest item.

    where would I go to adjust the widths of the submenu items to contain the entire length of the text on one line, rather than two as it is now.

    #menu-main .sub-menu {width: 204px;}
    #menu-main .sub-menu li a {width: 202px;}

    I'm not sure what you're asking in the last question? Like a child theme?

    I can see that you've added your codes on the Custom CSS option so that's ok.

    Do you use firebug or any similar tool? Maybe this could help you answer most of your css questions. Edit theme css using firebug

  5. Ian Schoonover
    Member
    Posted 6 months ago #

    **edit - I just saw the post above, I'll get to work now trying those solutions, Thanks! :)

  6. Ian Schoonover
    Member
    Posted 6 months ago #

    @ronangelo Woo! that worked out great, thanks a million :) I just started learning CSS the other day and I'm loving how simple, yet powerful it is. Thank you both for the help!

  7. Ian Schoonover
    Member
    Posted 6 months ago #

    @ronangelo I actually just discovered firebug today, is it anything like the "inspect element" feature in chrome?
    Thanks,
    Ian

  8. ronangelo
    Member
    Theme Author

    Posted 6 months ago #

    @iantskon
    Yup, it's the same.
    I noticed that you copied the entire blocks just to change the width like this:

    #menu-main .sub-menu, #menu-main .children {
    	width: 200px;
    	background-color: #2b2b2b;
    	border: 1px solid #000;
    	position: absolute;
    	z-index: 30;
    	display: none;	/* initial hide */
    	box-shadow: 0 1px 4px #000;
    }

    You can just use:

    #menu-main .sub-menu, #menu-main .children {
    	width: 200px;
    }

    The other attributes will still work even if you don't declare them again. This will make it easier to track your exact modifications.

  9. Ian Schoonover
    Member
    Posted 6 months ago #

    @ronangelo
    Cool, yeah I've already been experimenting with the inspect element feature here as of late.
    Thanks again for all the tips, and for the great theme!

    Ciao,
    Ian

  10. 650Pete
    Member
    Posted 4 months ago #

    After reviewing the code here, I am unable to identify `#menu-leg_menu {
    display: table;
    margin: 0 auto;
    /* Override the float */
    float: none;`
    in my editor section of the theme. I have used firebug to identify the section as `#nav-main {
    background-color: #2A5A8E;
    border-bottom: 1px solid #000000;
    float: left;
    padding-left: 10px;
    width: 100%;
    z-index: 20;`
    as the text to change, but everything I try fails to accomplish the centering task. I have tried float: none float: centre float:absolute to be honest I have no idea what I am doing. This has been thrust upon me and I am meddling through. Quite well until now. Any thoughts about what I might be doing wrong.

  11. WPyogi
    Volunteer Moderator
    Posted 4 months ago #

    Try adding this to your custom CSS (I hope that's what you are using so that your changes won't be lost when the theme is updated):

    #nav-main .nav-main {
        float: none;
        display: table;
        margin: 0 auto;
    }
  12. 650Pete
    Member
    Posted 4 months ago #

    Thank you WPyogi. Certainly did the job.
    The site is test.atgis.com.au I am trying to centre the menu items inside the nav bar whilst maintaining it at 100% so that the "gaps" are not at each end. Any ideas.
    Cheers mate

  13. Ian Schoonover
    Member
    Posted 4 months ago #

    Clear what you have now (save and set aside) and try this:

    #nav-main {
    background-color: #2A5A8E;
    border-bottom: 1px solid #000;
    float: left;
    display: table;
    margin: 0 auto;
    position: relative;
    z-index: 999;
    width: 100%;
    }
    
    .nav-main {
    border-left: 1px solid #023266;
    border-right: 1px solid #4878AC;
    margin: 0 auto;
    display: table;
    float: none;
    }
  14. Ian Schoonover
    Member
    Posted 4 months ago #

    you're getting those "gaps" because you have the width on the #nav-main id set to 0 auto; and it needs to be 100% so get rid of the padding-left and padding-right and use what I have above and see how that works..

  15. Ian Schoonover
    Member
    Posted 4 months ago #

    you're almost there, change .nav-main {float: none;} instead of left and you got it.

    You are doing all of your edits from the custom CSS option, right?

    You actually don't need all that extra stuff, just use what WPyogi has above and you should be all set.

  16. 650Pete
    Member
    Posted 4 months ago #

    Ian. You rock. That was perfect. Been banging away at that for ages now. I had been playing with the 100% width but kept formating the bar back to the left, which is as it turns out was to do with the .nav-main section. Didn't even see that.
    Again thank you.

  17. Ian Schoonover
    Member
    Posted 4 months ago #

    credit goes to WPyogi and Ronangelo for the solution, but thanks, glad you got it working. Looks like you're still playing around with it though, hope it works out.
    cheers!

Reply

You must log in to post.

About this Theme

About this Topic