[Resolved] How can i Move my logo in header to center in mobile

[eden]

Hello i have a problem in my site edensharabi.co.il

I am trying to move the logo to the center in the mobile version and also move the menu icon to the right

[eden]

Also i am trying to change the menu to be open from right side how can i do this?

[eden]

Also i want to add my phone number to the header in desktop and mobile how can i do it?

I dont know how to put elements and stuff

[eden]

ok I have managed to put my phone number but I need CSS for styling it

In mobile:

I want phone number to be to the left and white color, also to resize the phone icon.
the logo should be centered, and to the right put the menu icon with the 3 dashes.

In desktop:
Move the phone number to the left,make the phone number white color,and also the phone icon resize and move to the left

[Tom]

Hi there,

Did you end up using Elements to add the phone number + icon? If so, can you wrap them in a wrapper?

For example:

<div class="header-phone">
    Your existing HTML here.
</div>

Be sure to do that for the desktop and mobile Elements.

Then, try this CSS:

.header-phone {
    display: flex;
    align-items: center;
    order: 20;
    margin-right: auto;
}

.header-phone img {
    max-width: 30px;
}

.header-phone a {
    color: #fff;
}

.nav-aligned-left .main-navigation.has-branding:not(.slideout-navigation) .inside-navigation .main-nav {
    margin-left: 0;
    margin-right: 0;
    flex-grow: 0;
}

#mobile-header .site-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#mobile-header .header-phone {
    order: 4;
    margin-left: 20px;
}

#mobile-header .header-phone a {
    font-size: 12px;
}

#mobile-header .header-phone img {
    max-width: 20px;
    padding-right: 5px;
}

[eden]

Ok there were some changes but still need fixes with the following:

In Desktop:
The logo has moved to the center and i need it to the right as it were before,
Also The phone number color should be changed to white plz.

In mobile:
Nothing has been fixed except for the phone icon that was resized properly.
I need my logo to be centered there,
the menu dashes to be to the right,
and the phone number to the left.

Thank you

[Tom]

Can you try the adjusted CSS above?: https://generatepress.com/forums/topic/how-can-i-move-my-logo-in-header-to-center-in-mobile/#post-1130807

[eden]

No i dont know how to code,
Do you want maybe admin access to solve these issues for me?

Plz let me know if yes where to send the details

[eden]

Oh wait I am sorry most of it has been fixed,
The problems left for me are in the mobile version:

The places are aligned correctly, But as you can see in this link https://edensharabi.co.il/wp-content/uploads/2020/01/IMG_9940.jpg the phone number is too big so it need to be smaller for mobile.

Also I would like to change the menu to be open from right side and not like this https://edensharabi.co.il/wp-content/uploads/2020/01/IMG_9941-473×1024.jpg

thank you

[eden]

Also If you can add a little bit of space between the phone icon to the phone number that will be great (In both mobile and desktop)

[Tom]

CSS adjusted again: https://generatepress.com/forums/topic/how-can-i-move-my-logo-in-header-to-center-in-mobile/#post-1130807

Let me know 🙂

[eden]

Now everything is aligned correctly I only have one last request:

In mobile i want to change the design of the menu to be open from the right how can i do it?

[eden]

like this menu for example https://imgur.com/a/rI33r0q

[Leo]

Try the off canvas panel:
https://docs.generatepress.com/article/off-canvas-panel-overview/

[eden]

ok I have managed to make the menu slide from the right but i need help with some fixes https://imgur.com/a/mQcIHm7

First I have hebrew language so i need to align the words to the right,
Second I would like to make the opened menu to be smaller (so it will not cover the most of the screen when it open),
And last I would like to add a divider between each link in the menu.

Can you help me with it ?

[Author]

Posts