Center site title and menu – Twenty Eleven child theme

  • I’m trying to center a site title and menu; center it so that as the screen is resized it stays centered (ie. I cannot use fixed pixel widths). The site:

    https://danhalter.com/

    At the moment, gleaned from various sources I’m using this CSS for the title:

    /* centre header */
    #site-title {
    position: relative;
    width: 50%;
    margin: 0px auto;
    }

    And this CSS for the menu:

    /* moving menu up and left */
    #access {
    background: #fff; /* Show a solid color for older browsers */
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    position: relative;
    top: -50px;
    left: -40px;
    }

    /* something below works */
    #access {
    display:block;
    z-index:999;
    text-align:center;
    }

    .menu {
    overflow: hidden;
    }

    .menu ul {
    overflow: hidden;
    text-align: center;
    }

    .menu li{
    display: inline-block;
    float: none !important;
    }

    But it is imperfect; not exactly centered, and because I’m pushing the menu left a bit to try to center it, when the screen is made smaller it moves left.

    I’ve seen this question on the forum and elsewhere but have yet to find the solution.

Viewing 7 replies - 1 through 7 (of 7 total)

  • Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

    Thread Starter ralphborland

    (@ralphborland)

    Thanks Esmi, I do use Firebug to help me locate elements on the page, and I’ve used it to map out the structure around the title and menu to try and solve this, but my knowledge of CSS is limited, so I’ve spent a lot of time over the last few months (!) trying to perfect this, but can’t seem to grasp it…

    I’m sorry but it is beyond the scope of these forums to deal with general CSS issues. Try a dedicated CSS resource such as https://www.css-discuss.org/ instead.

    Thread Starter ralphborland

    (@ralphborland)

    Sure, I will try on that forum, but looking at the number of unsolved queries for people trying to implement this for WordPress specifically, I think it would be worth having it available here too.

    Sorry but it is not WordPress specific. It is well beyond the remit of these forums to start teaching people how to use CSS.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Although the support for centering web elements has been given many times before, so a thorough search here should suffice if you know how to implement it.

    Thread Starter ralphborland

    (@ralphborland)

    Thanks, yes I’ve found several suggestions for how to do it, but none of them quite work for me. My lack of CSS knowledge, but it’s not for want of trying.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Center site title and menu – Twenty Eleven child theme’ is closed to new replies.