Menu overlapping logo on Simplified Header layout

Hello

I currently have my header set to Simplified Header

Right column width 250px
Header height 95px

Logo container width 25 percent
Logo image maximum width 235px

However on smaller screens (such as 1024×768) the menu items appear above the logo

Attachments:

You must be logged in to view attached files.

Hello,

We have checked the width 1024 everything works properly on 1024 -768 http://prntscr.com/j0aoui

At the same time I see overlapping in width: < 1024 In order to correct this reduce right block width, set minimum and make header full width.

Best Regards

Hello

Thank you for the quick response. Fantastic support!

After some consideration I have decided to make use of the ‘E-Commerce’ header option.

The one addition I would like to make is that the social icons sit on the right hand side alongside the cart (where ‘My Account’ would be if the option was enabled). I have provided an image of what I would like it to look like.

On mobile is it possible to remove the ‘Search for Products’ from the menu and perhaps replace with the social media icons?

Attachments:

You must be logged in to view attached files.

Hi,

There is no option to display social buttons in the header as on your screenshot. You can try to this manually customizing our theme’s PHP functions located in the file inc/template-tags.php.

Sorry, but there is no way to link timeline image to a YouTube video.

Kind Regards

Thank you.

There is one question you have missed. On mobile is it possible to remove the ‘Search for Products’ from the menu? Possibly replace it with the social media icons? Or just perhaps guide me in the right direction of which file to modify 🙂

Search in the mobile menu is also in the file inc/template-tags.php. You will need to modify some parts of the template code to replace elements you need.

Thank you. I will attempt it. Are you available for paid customization or can refer anyone?

Is it possible to change the background color of the mobile menu?

Is it possible to change the mouse over / hover color of the social icons?

Possible to remove breadcrumbs and sort options on Shop page?

Attachments:

You must be logged in to view attached files.

Hello,

Currently, we do not provide paid support. At the same time, we are ready to help you in minor CSS customization.

Mobile menu background – do you mean this part – http://prntscr.com/j0npg3 if yes, try this CSS code:

.main-header .wrapp-header {
    background:#000000;
}

Change #00000 for the color you want and add this code to Theme Settings > Custom CSS > mobile

Social icons – please clarify which ones?

In order to delete this block http://prntscr.com/j0nrkj add this CSS code to Shop page editing mode http://prntscr.com/j0ns5v (switch to backend mode) http://prntscr.com/j0nsow

.shop-loop-head {
    display: none
}

In result, this block would disappear from shop page but will be on categories page or product pages. If you want to get rid of it from all the pages, add this code to Theme Settings > Custom CSS > Desktop

Best Regards

To answer your question

Social icons – please clarify which ones?

Facebook Twitter Instagram and Youtube in the footer.

The shortcode I am using

[social_buttons size="medium" style="circle" type="follow"]

Mobile menu background

The actual menu when you click the hamburger.

Attachments:

You must be logged in to view attached files.

Is it possible with css to change the color of the ‘Update Cart’ text on the Cart page?

Managed to sort out the update cart button

Hello,

Please update your issue. Do you still need our help? Please clarify which issues have not been solved yet.

I just need to change hover color of social icons in the footer using widget [social_buttons size="medium" style="circle" type="follow"]

Hello,

Please add this CSS to Theme Settings > Custom CSS

.color-scheme-light .social-icons.icons-design-circle li a:hover {
    color: #ffffff;
    background-color: #000000
}

Please change color and background to the colors you want to get on hover.

Best Regards

Hello. This changed the color but also changed them to square icons on hover?

Hello,

No, it changes only color and background-color. If you do not need background color use this code:

.color-scheme-light .social-icons.icons-design-circle li a:hover {
    color: #ffffff;
}

Best Regards

[Author]

Posts