wordpress centre logo – unsupported theme

[tracybags]

Inherited a site built in old version of Rework theme, trying to centre logo and also navigation. It’s such pig in a poke I’m really not sure what code to paste to codepen (and last time I got in trouble for pasting code I shouldn’t have) so hoping someone can see what’s going on in a browser developer – site is http://www.pamcusters.co.uk

Thank you very much anyone :)

[Shikkediel]

The image seems to be an easy one – just add margin: auto.

For the navigation you could do this:

#header {
  text-align: center;
}

#navigation {
  display: inline-block;
}

[tracybags]

Thank you for replying to my problem. I’ve tried your solution and it makes no difference. In the ‘additional CSS’ box at the moment is the following:

#logo {float:none;
margin: auto;}
#header
{height: 120px;
text-align: center;}
#navigation
{display: inline-block;}

This did have the standard logo to the left and navigation to the right, but I’m trying to get it so the logo is centred and the navigation is below it, preferably also centred. I tried changing the ‘float’ to none as it had been ‘left’. I also changed the float on the navigation to ‘none’ which did make it left align but not centre. With your display inline-block it says I can’t have that with the ‘float’ so I removed the ‘float’ from the navigation.

Any idea why this is not working as you expected? Sorry to bother you and thank you for your help.

[Shikkediel]

The first bit of CSS would have to be applied to the image itself:

#logo img {
  margin: auto;
}

Seems to work – because images already have display: block specified in the general stylesheet.

For the navigation, there currently is still a float: right in place that would have to be “neutralised”.

#navigation {
  float: none;
  display: inline-block;
}

With your display inline-block it says I can’t have that with the ‘float’

Are you saying “it” (I’m assuming some WP interface) is refusing to execute this somehow?

The navigation is taking up too much space and will skip to the next line on small screens by the way but that’s a different issue.

[tracybags]

Hello Shikkediel – thank you so much! I have great news and terrible news! The logo is now centred – genius! – the navigation is now centred – these were the two things I was trying to achieve and the code you provided has succeeded!! (Yes, ‘it’ was a popup that said I couldn’t have both, yet it’s working with yours now. So thank you that’s all perfect!

Now the terrible news – as you have mentioned at the end – the mobile view now is showing BOTH a ‘navigate’ drop down box for the mobile navigation as it was before, but now it is ALSO showing the desktop navigation skipped across 3 lines. Before the code changes I made above, the desktop navigation was not showing on the mobile, only the mobile navigation. So do you know what I need to tweak now to make the desktop navigation disappear as it used to in mobile view?

[tracybags]

Hello again – I think I’ve managed to fix it (not sure I’ve done it the best way) but using the ‘additional css’ box I have found the relevant lines in the style.css document to remind the navigation NOT to display, then pasted in the entire mobile nav css into my editor using a new max-width media query.

Thank you so very much for your help. Haven’t been on this site for a while and every single time I do come here I am knocked out by the knowledge and willingness to help. Restores the faith in humanity!! :)
Thank you again.

#logo {float:none;}
#logo img {
margin: auto;
}
#header
{height: 120px;
text-align: center;}
#navigation {
float: none;
display: inline-block;
}
@media only screen and (max-width: 784px) {
#navigation {display: none}

        .selectnav {
        background: url(../images/nav_arrow.png) no-repeat, url(../images/bg_dots_grey.png);
        background-position: center right, top left;
        border: none;
        border-radius: 0;
        color: #959595;
        display: inline-block;
        font-size: 12px;
        margin: 0 0 30px;
        padding: 8px 10px;
        text-transform: capitalize;
        -webkit-appearance: none;
        width: 100%;
    }

}

[Author]

Posts