Two logos in header

Hi Yigit, thanks for your reply.

• Fyi: now you see the same logo twice, but finally it will be two different logos.
  Attached you find a link to a print screen of what I mean. Now the two logos are right next to each other in the centre of the whole screen. If you consider the header to be two columns (vertical red line) the intention is that the two logos are placed in the centre of their own column, so the left one more to the left and the right one more to the right (see red arrows). How can I do that?
• I have done as you said, however on mobile I now see only one logo…

PS: the HTML code < ol > doesn’t seem to work in this forum; at least it doesn’t show any figures.

Hi Rikard,

That works fine for pc and tablet (not for mobile – see below), although then suddenly the base logo (theme options) was shown underneath. When I deleted the logo in Theme options, the Enfold logo showed up. Now I have used

.av-logo-container {
	display: none;
}

to not show the Enfold logo.

One more problem remains: on mobile now the two logo’s are placed nicely next to each other, but the menu is not visible anymore.

What to do about that?

Thanks & regards,
Monique

Hi Ismael,

I just cannot not show the 2nd logo as it reflects the 2nd division of the company and must be shown on mobile too. Any other ideas?

I don’t know about the advanced_menu_toggle link, but as you can see in my reply of January 8, 2016 at 10:54 am (just the one befor your’s) I hid the .av-logo-container, so maybe that also ‘deleted’ the menu_toggle link on mobile? I did that because when I followed Rikard’s instructions, I got a hugo extra bar + logo under the widget with the two logos. I have now taken this css out to show you what I mean. Any more suggestions?

Have a nice Sunday!
Monique

Hi,

Before I bought Enfold theme for this client I checked with you if it was possible to have two logos in stead of one in the header and you confirmed me it was. Therefore I promised this to my client and now I have to make it work. And of course in an acceptable way :-)

To clarify what it is that exactly still needs to be solved:

1) See print screen pc:
In the header I have added according to your advise a widget area to present the two logos for the two divisions. Under this widget area you can still see the logo from the theme option (see red box). When I try to hide this through CSS (as far as my CSS knowledge goes…), this will also hide the advanced_menu_toggle link on mobile, which is not what should happen. If I delete this logo from theme options, the Enfold logo shows up, so that is not a solution either.

2) See print screen mobile:
The result of the extra widget is logo 1 and logo 2 next to each other and underneath the theme options logo and the advanced_menu_toggle link next to the theme options logo. Quite messy :-(
What we want is (1) either the two logos next to each other and the advanced_menu_toggle link above them or (2) the two logos under one another on the left and the advanced_menu_toggle link on the right or (3) all logos and menu in one line. At least it should be there and look nice ;-)

Hope you can help!

Thanks & regards,
Monique

Regards,
Monique

Hey Andy,

I appreciate what you’re saying. I don’t use imgur.com nor dropbox, so I trust you can work with the links (see below).

The 1st image reflects what the header should look like on a pc.
The 2nd image reflects what the header could look like on a mobile. There are various options for this, as long as everything is there and looks straight forward and clear to the visitors.

Thanks & regards,
Monique

Hi Ismael,

Just to remind you > there are 2 problems:
1) on pc (see screen print pc above)
2) on mobile (see screen print mobile above)
You sent me a possible solution only for problem 2) mobile; not for problem 1) pc.

I tried what you suggested for mobile. It looks better, but does not solve the problem completely as the advanced_menu_toggle is now somewhere on top of the content. I attach a jpg which reflects the outcome of your solution on my mobile (see below).

So still 2 issues open.

Regards,
Monique

Hi Andy,

Sorry, but here nothing has been solved :-(

1) On pc:
I use Windows 10 and usually use Firefox as a browser, but I have the same view in all different browsers (see http://michiels-reusel.arti-sign.nl/print-screen-logos-2.jpg).
The logo in the red box (this is the logo read from the theme options) should not be shown. On pc it should look like http://michiels-reusel.arti-sign.nl/header-on-pc.jpg.

2) On mobile:
I have a Samsung S III and use the standard Internet app. This is what I see: http://michiels-reusel.arti-sign.nl/header-on-mobile-2.jpg. The advanced_menu_toggle (see red circle) is too low on the screen.
What it should be is the two logos and the advanced_menu_toggle all visible in the header. The layout can be either what you (Ismael) advised but than the advanced_menu_toggle straight under the logos and above the image (so in the header, not underneath), or one of the options you can see at http://michiels-reusel.arti-sign.nl/header-on-mobile.jpg.

Regards,
Monique

Thanks Andy!

1) Seems to work better now. However on all screen sizes under 990px (that is the min-width I used) I now see a grey bar on top op the screen (above Enfold’s top bar). When I look with Firebug, it seems that it has something to do with the advanced_menu_hide (see Ismael’s reply of January 18, 2016 at 4:21 am).

2) When on my pc I reduce the width back to mobile size 360 px, it looks ok. I cleared cache on my mobile which didn’t help. I have no other device available right now. When I view the responsive layouts with the Web Developer Toolbar in FF, it seems to be ok. So I assume my mobile is conflicting somehow. I will check on another mobile device tonight.

Best regards,
Monique

Hi Andy,

1) Sorry, I thought it was useful (looks bashful).
You can see what I mean at http://michiels-reusel.arti-sign.nl/header-on-screen-size-smaller-than-990px.jpg. The upper grey bar is shown on all screen widths under 990 px and should not be there.
I cleared cache and refreshed many times, used different devices, tablets, smartphone, browsers et cetera, but it looks the same everywhere.

2) I wasn’t able to test yesterday. Will do that in the weekend and let you know.

Cheers,
Monique

Hi Andy,

1) Yes, that works perfectly :-)
2) Like I mentioned, I’ll still let you know asap.

Enjoy your weekend,
Monique

Hi Andy and Ismael,

You confuse me. What one of you is saying, the other one changes…

What I see now:
1) home page 990 px and up.
2) home page 768 px up to 989 px.
3) http://michiels-reusel.arti-sign.nl/home-mobile-up-to-767-px.jpg (@Andy, I checked in the weekend on my partners mobile and saw this, so the issues with mobile must have come form my own mobile).

To me that looks perfectly alright. What am I missing here?

@Ismael: are you really sure I need to make those changes? I don’t want to change something that is already good. Can the two of you check together please?

The code I have now put together from all your advise is:

#header .widget {
    transform: translate(0%);
    min-width: 100%;
	padding-top: 0;
	padding-bottom: 0;
}

@media screen and (min-width: 990px) {
.container.av-logo-container {
	display: none;
}}

@media screen and (max-width: 990px) {
#advanced_menu_hide {
display: none !important;
}}

@media only screen and (max-width: 990px) {
.responsive #top .logo {
    display: none;
}

.html_header_top.html_bottom_nav_header #header_main {
    padding-bottom: 20px;
}

#advanced_menu_toggle, #advanced_menu_hide {
    position: relative;
    right: auto;
    top: 30%;
    margin-top: -15px;
    margin: 0 auto;
}
}

Please advise.

Thanks & regards,
Moniuqe

Hey!

That is what I thought as well.
You can flag this topic as closed and if any more problems occur, I will open a new ticket.

Thanks a lot for all your help & have a nice day!
Monique