Login for custommers - how to create

LillaGreen replied

2 years ago

Customer Reply

thank you :)

PenciDesign Supporter replied

2 years ago

Staff Reply

Hi,

Please modify the CSS code like the below:

@media only screen and (max-width: 767px) {
    .penci-top-bar .penci-login-popup-btn a {
      font-size: inherit;
      margin: 0;
      vertical-align: top;
      line-height: 14px;
    }
    .penci-top-bar .pclogin-item {
        vertical-align: top;
    }
}

Regards,
PenciDesign.

LillaGreen replied

2 years ago

Customer Reply

Ok, but after inserting the css code, the login icon is still not aligned as it should - it is not in the same line as the other icons:

PenciDesign Supporter replied

2 years ago

Staff Reply

Hi,

Please navigate to Appearance → Customize → Custom CSS, and then insert the following custom CSS code:

@media only screen and (max-width: 767px) {
    .penci-top-bar .penci-login-popup-btn a {
      font-size: inherit;
      margin: 0;
    }
    .penci-top-bar .pclogin-item {
        vertical-align: top;
    }
}

Regards,
PenciDesign.

LillaGreen replied

2 years ago

Customer Reply

You don't understand me. The icon should can stay in the top bar of your theme for mobile as it is on default, but it is kind broken and is not displaying properly - the icon is moving while scrolling and has no fix location

PenciDesign Supporter replied

2 years ago

Staff Reply

Hi,

Unfortunately, the CSS code can't move the topbar icon into the main menu area.

Regards,
PenciDesign.

LillaGreen replied

2 years ago

Customer Reply

So on default, it is not displayed correctly in the top bar from your Soledad theme? I'm sure there is a way to edit it via CSS so that it looks good on mobile in the top bar - I hope you will help me. Thank you in advance!

PenciDesign Supporter replied

2 years ago

Staff Reply

Hi,

You are currently using a pre-built header layout, which does not support displaying the logged-in icon on the main menu on mobile. As mentioned in my previous response, you need to create a custom header layout if you want to display the logged-in icon in a custom area.

Regards,
PenciDesign.

LillaGreen replied

2 years ago

Customer Reply

I already have a custom header... I want the login sign is displayed correctly. Please look at it on mobile - I don't want to create another custom heading - now the top menu bar is not displayed correctly and there is a bug for the login icon as it moves up and down when scrolling - also on the desktop is not 100% sticked to the top bar

PenciDesign Supporter replied

2 years ago

Staff Reply

Hi,

Please follow the document in the video below to create a custom header layout for your site:

Regards,
PenciDesign.

LillaGreen replied

2 years ago

Customer Reply

Is there a way to put the login icon near the shopping cart? or at least to be listed right next to the social media links in the top bar on mobile? Right now looks not good and people cannot see it... and it is moving from under icons to the right side when scrolling. it seem there is a bug

PenciDesign Supporter replied

2 years ago

Staff Reply

Hi,

Please follow the document at this link to understand how to create these pages: https://woocommerce.com/document/woocommerce-pages/

Regards,
PenciDesign.

LillaGreen started the conversation

2 years ago

Conversation Start

Hello, I would like to create a login section and account page for my woocommerce customers - how can I do it with Soledad? Thank you!