Centering Primary Menu w/ Dropdown "Hatch" Theme

  • BoAllen

    (@boallen)


    10 years, 8 months ago

    Hello all,

    I’ve been working on modifying my “Hatch” themed site and have been stumped by centering my primary menu for quite some time now. I’ve made numerous changes to the primary menu code to no avail and am hoping somebody will be able to see something I’m not. I realize this has been touched on in other threads, but I have not been successful with any of the other replies. Below is the chunk of code I assumed would be the ticket as I was able to change the font size, style, etc.. Thanks in advance.

    /* Primary menu
    ————————————————————– */
    #menu-primary {
    font-size: 1.5em;
    font-style: italic;
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 99;
    }
    #menu-primary .menu { text-align: center; }
    #menu-primary .menu ul { text-align: center; }
    #menu-primary li {
    display: block;
    float: 20px 0 0 0;
    width: 100%
    min-height: 30px;
    }
    #menu-primary li a {
    line-height: 2em;
    margin-left: 1.5em;
    display: block;
    font-weight: bold;
    }
    #menu-primary li.current-menu-item a { color: #aaa; }
    #menu-primary li li, #menu-primary li li.current-menu-item li {
    clear: both;
    float: none;
    }
    #menu-primary li li:first-child, #menu-primary li li.current-menu-item li:first-child { border-top: none; }
    #menu-primary li li a, #menu-primary li li.current-menu-item li a {
    font-size: 1.5em;
    font-weight: normal;
    text-transform: none;
    color: #888;
    margin: 0 5px;
    padding: 12px 15px;
    }
    #menu-primary ul li a:hover, #menu-primary li ul li a:hover { color: #222; }

Viewing 15 replies - 1 through 15 (of 26 total)
1 2
  • WPyogi

    (@wpyogi)

    10 years, 8 months ago

    It’s really not possible to help with CSS questions without seeing the site live – CSS code alone isn’t useful. Can you post a link to your site?

    Thread Starter BoAllen

    (@boallen)

    10 years, 8 months ago

    Ah – My apologies. I’m visual artist and really new to code of any kind – though I am fascinated by the language.

    http://www.viewfromthecliff.com

    WPyogi

    (@wpyogi)

    10 years, 8 months ago

    I hope you haven’t made changes to the theme files – looks like you have custom CSS plugin which is GREAT! So take out what you’ve added there for the menu and add this instead:

    #menu-primary .menu {
    display: table;
    float: none;
    margin: 0 auto;
}

    Thread Starter BoAllen

    (@boallen)

    10 years, 8 months ago

    I did make some mild changes to the theme file before I realized that it would all be deleted in the event of an update, which was the catalyst for installing the MyCustomCSS plugin. Though I don’t plan on updating for now anyway (unless totally necessary) My hope was that installing that plugin and copying my code over would prevent any major issues in the future. All the changes I’ve made have been to the custom CSS from here on out. I’ll that a shot – thanks a million!

    Thread Starter BoAllen

    (@boallen)

    10 years, 8 months ago

    Unfortunately that didn’t do the trick.

    Thread Starter BoAllen

    (@boallen)

    10 years, 8 months ago

    Just tried adding

    width: 100%

    Which did make a difference. The menu text shifted slightly to the left, but not fully center. The menu text seems to be stuck inside something that is not the same width as the entire site.. strange.

    WPyogi

    (@wpyogi)

    10 years, 8 months ago

    Though I don’t plan on updating for now anyway (unless totally necessary)

    Yes, you should always keep your theme up to date or sooner or later you’re going to have compatibility problems with WP core or plugins.

    You also need to take out everything from the custom CSS EXCEPT your changes – as is you have a lot of duplicate code and errors. It’s really not workable to copy the entire theme stylesheet there.

    Try putting the code I posted in the top of the custom CSS – here:

    /* Normalize
-------------------------------------------------------------- */

#menu-primary .menu {
    display: table;
    float: none;
    margin: 0 auto;
}

    That works fine using Firebug. Make sure you clear any caches on your site and browser.

    Thread Starter BoAllen

    (@boallen)

    10 years, 8 months ago

    I see – so does that mean I should reinstall the Hatch theme since those files have changed slightly?

    Thread Starter BoAllen

    (@boallen)

    10 years, 8 months ago

    I guess I was under the impression that if I took all the code from the Hatch editor and put it into the custom CSS i would in effect by bypassing the theme and only using the code from the custom CSS.

    WPyogi

    (@wpyogi)

    10 years, 8 months ago

    Yeah, that would be the best way to go – but first make a backup of your site and make a copy of the entire theme folder on your local computer so you have that as a backup. Then use a program like diffchecker to find your changes – http://www.diffchecker.com/ – you can just download a copy of your theme here:

    http://wordpress.org/themes/hatch

    And find the style.css file – to compare. Then put just those changes in custom CSS along with what I posted. And then reinstall Hatch.

    Then you should be good to go :).

    WPyogi

    (@wpyogi)

    10 years, 8 months ago

    bypassing the theme and only using the code from the custom CSS.

    No the theme uses BOTH – so that makes duplicate code – not so good and much harder to keep track of and make changes.

    Thread Starter BoAllen

    (@boallen)

    10 years, 8 months ago

    I went ahead and reverted the Hatch theme to the original code and deleted all of the Custom CSS except for the changes you sent me for the Primary Menu and it remained in it’s original location..

    When I make the rest of changes to the custom CSS from here on out to get back to where I was do I need to include

    /* Normalize
    ————————————————————– */

    and then the bit of code that I’m trying to customize?

    or do I just hashtag it?

    WPyogi

    (@wpyogi)

    10 years, 8 months ago

    You can take out this:

    /* Normalize
-------------------------------------------------------------- */

    I just included that so you’d know where I tried it. The hashtag is part of the CSS code – so you only add that if and when it’s part of the CSS – don’t add or subtract any little bit or CSS breaks.

    Now add this too:

    #menu-primary {
    float: none;
    width: 100%;
}

    I couldn’t even find that before cause there was such a jumble of code :).

    Thread Starter BoAllen

    (@boallen)

    10 years, 8 months ago

    No dice.. I must be missing something here.. Sorry to be a pain. I’ve been doing this since 8am…

    WPyogi

    (@wpyogi)

    10 years, 8 months ago

    Looks like you have an error in that custom CSS – can you copy here what you have in there?

Viewing 15 replies - 1 through 15 (of 26 total)
1 2
  • The topic ‘Centering Primary Menu w/ Dropdown "Hatch" Theme’ is closed to new replies.