Logo positioning on reactive layout

marithomas17 · Member · Oct 23, 2017 at 2:52 pm
Copy link

Add topic to favorites
Hi,

I have a website with a logo and menu on the same line. This menu reduces to a burger menu once the screen gets smaller than desktop size.

I want to have a logo which is positioned centrally on all of my screens, with either menu layout. Can someone help me please?

I currently have this CSS code inserted but it doesn’t create a central position on all screens:
#logo {
float: left;
position: relative;
left: 43%;
}

Any help would be much appreciated thanks.

maaree.com

The blog I need help with is: (visible only to logged in users)
siobhyb · Member · Oct 23, 2017 at 5:35 pm
Copy link
I’m glad my colleague was able to help with the CSS you need over live chat. :) Please don’t hesitate to start a new live chat with any extra questions.
marithomas17 · Member · Oct 23, 2017 at 6:08 pm
Copy link
Hi, thanks for your comment but this particular issue was not able to get resolved over chat. If you have any idea how I could achieve this please let me know.

Thanks
siobhyb · Member · Oct 24, 2017 at 8:48 am
Copy link
Hi there,

Thanks for following up and sorry that your answer wasn’t fully resolved! Looking over your existing custom CSS, you’ll first need to remove the following:
```
#logo {
    float: left;
    position: relative;
    left: 43%;
}
```
After you’ve removed the above, add the following to centre the logo (and the menu toggle) across all devices:
```
#header .five.columns {
    width: 100%;
}

#header #logo {
    text-align: center;
    padding-left: 0;
    width: 100%;
}

#header #logo .site-logo-link {
    float: none;
}

.menu-toggle {
    text-align: center;
    width: 100%;
    padding-right: 0;
}
```
You’ll also need to set the width of the main navigation to 50% for larger devices, so that it never overlaps with the logo:
```
@media handheld, only screen and (min-width: 1024px) {
    #navigation {
        width: 50%;
    }
}
```
Hope that’s helpful! Let me know how you get on with the above.
marithomas17 · Member · Oct 25, 2017 at 11:00 am
Copy link
Thanks so much for your help! I’ve been trying for ages to get this to work and it finally does! YAY! One more thing though if possible? The burger menu has not shifted underneath the logo. Is was inline with the logo (on the far right before). Is it possible for it to still remain on the upper line? it just makes my header space very thick now :)

thanks!
siobhyb · Member · Oct 25, 2017 at 1:39 pm
Copy link
I’m glad that helped!

To move the hamburger menu to the upper right on mobile, first remove the following custom CSS that I provided:
```
.menu-toggle {
    text-align: center;
    width: 100%;
    padding-right: 0;
}
```
And replace it with the following:
```
.menu-toggle {
    position: absolute;
    top: 0;
    right: 0;
}
```
Let me know how that goes. :)

No items found.