Issues with header when updating Enfold

Hi,

It is a while ago that I got stuck into this problem. I didn’t have the ‘courage’ to dive into this. :-( But in the end Enfold needs to be updated and this issue needs to be solved…!

Meanwhile I updated the site to Enfold 4.5. This is now live. On screens from 990 px upwards it all looks fine. There are issues with smaller screens below 990 px. Please check for yourself the responsive design mode in FF Developer Edition or Chrome. Or on any small device.

I checked Mike’s idea to add the includes/helper-main-menu.php to the child theme, but that unfortunately doesn’t work. So I deleted that again.

Is it possible that / what I would like to achieve is:

1) On screens 768-989 px
* Is it possible to have the social media icons back in the top bar?
* And then have the two logo’s as well as the hamburger menu icon next to one another in one row, divided for example 40%, 40% and 20%?

2) On screens up to 767 px
* Maybe have only one logo on the left (the main logo in Enfold options – I will try to persuade my client to accept that) and on the right have the hamburger menu icon.

Would you be able to help me with this? If you would like to have login details, please let me know. I could also set up a development location where you could work without interfering with the live site – if you wish.

Thanks in advance & kind regards,
Monique

Hi Mike,

Thanks for your help. I work with child theme by the way, so put the code in my child’s style.css. I have done what you suggested. I am still seeing some issues – it still looks quite ‘messy’ (see also my screenshots below):

1) On mobile screens up to 767 px (see also your own screenshot mentioned above):
1. The social icons are showing twice now: in the top bar and in the logo area.
2. The logo’s are not placed in (horizontal) line with each other.

What would be preferred:
1. The social media icons shown in the top bar only, so not shown in the logo area.
2. The hamburger menu icon shown either in the center or right of the logo’s.
3. The logo’s placed in (horizontal) line with each other.

2) On mobile screens from 768 up to 989 px:
1. The social icons are not shown in the top bar.
2. The logo’s are now placed neatly in (horizontal) line with each other :-)

What would be preferred:
1. The social media icons shown in the top bar, so not shown in the logo area.
2. The hamburger menu icon shown either in the center or right of the logo’s.

Is it possible to achieve that?

Looking forward to your reply.

Kind regards,
Monique

Hi Mike,

I would appreciate very much if you want to do that. When I built this site I followed some Enfold ‘rules’ to get a 2nd logo in the header, but since the header in the theme was rebuilt completely, it doesn’t work so well anymore…

Please find WP login details below. Let me know in case you also want ftp login.

Kind regards,
Monique

Hi Mike,

Sorry, I’ve been occupied with other things the past few days. Picking this up again now. First of all thanks a lot for your effort to help me!

1) Mobile screens up to 767px

Your solution for smaller screens up to 767px partially works. I like the idea of one image, although in this way we cannot have a link to the two different sections of the company. On very small screens (up to 479px) it really looks good now, like your expected results image. However, on screens from 480px up to 767px, the menu (sort of) overflows the image. Since the social media icon are in the top bar, we won’t need the vertical divider and right padding and margin. So I changed your code slightly to:

@media only screen and (max-width: 767px) { 
.responsive #top #wrap_all #header_main #text-2 .textwidget .av_one_half.flex_column_div.first {
 content: url(https://michiels-reusel.nl/wp-content/uploads/2018/11/mobile-logo.jpg);
background-size: contain;
    width: 80% !important;
}
.avia-menu.av_menu_icon_beside {
    padding-right: 0px !important;
    margin-right: 0px !important;
    border-right-width: 0px !important;
	}
#text-2.widget_text .textwidget .flex_column_div:nth-child(even) {
display: none !important;
}
}

I suppose lateron I can replace this code to be in my Child’s style.css without any problems?

This would fix the issue for screens 767px and under. HURRAY!

2) Mobile screens from 768 up to 989 px

That leaves us with the remaining issues of screens from 768 up to 989px. Can you please look back at my post of November 1st and see if somehow you can help me with that as well?

Best regards,
Monique

Hi Mike,

That is great! I really looks “neat and tidy” :-)

Thank you so much for your all help! If I could I would rate Enfold 10 stars for support!

Can you please flag this topic as solved?

Sorry, one more question. When I transfer the code which is now in Extra CSS to Enfold Child style.css, the code gets mixed-up which previous css (I think). Can you tell me where in style.css I should put the code to avoid this from happening?

Sorry once again. I got it all sorted now. Can you flag this topic as solved please?

Cheers,
Monique

• This reply was modified 6 years ago by Monique. Reason: All sorted now