Logo above Menu Toggle

Sparkling
1

Hi!

In mobile view, my Logo lies beneath the menu toggle. I would like to change this, and place the Logo to the top of the page and the Toggle just under it. How can I do this?

I attached a screen-shot, as my site is not live yet.

Thank you!

2

Hi @vladimirspasc,

I hope you are well today and thank you for your question.

Could you please share me your site URL where it’s displaying so that i can help you to achieve it?

Best Regards,
Movin

3

Hi Movin.

As I said, the site is not live and is being run locally, therefore I can’t share a URL.

Thank you for your time.

4

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

button.btn.navbar-toggle {
    position: absolute;
    top: 60px;
}

@media screen and (max-width: 780px) {
div#logo {
    margin-bottom: 60px;
}
}

Please change the values 60px in the above CSS code according to your logo size.

5

Yes, this changes the places of the elements but now the Menu Toggle slides to the left, even though I centered it previously. How to fix?
Thank you

6

Because We have applied absolute positioning on it.

Please change above CSS code as following and change left position value 40% to centre align it.

button.btn.navbar-toggle {
    position: absolute;
    top: 60px;
left: 40%;
}

@media screen and (max-width: 780px) {
div#logo {
    margin-bottom: 60px;
}
}
7

It works perfectly.

Thank you very much for your support.

Best regards

8

Good evening :slight_smile:

Is everything ok now? do you need anything else?

9

That would be all,

Thank you :slight_smile:

10

Hi, there

Nice, to hear your problem is fixed:)
Now I will now close the topic and mark it as resolved.
Feel free to contact us again Thanks!