Tagged: ,

Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • #560390

    Hi there,

    My client (see developement site mentioned below) wants two logos in the header. With the help of Kriesi’s instructions and various topics I have succeeded to do that.

    However, I have two issues:

    • How can I get each of the logos to be placed in the centre of each ‘column’?
    • On mobile phone the 2nd logo floats on top of the content and they are both on the right side of the screen and therefor in conflict with the menu. How can I get the two logos to be placed neatly under each other and start the content only under the 2nd logo and how to get the logos on the left side of the screen?

    Thanks & regards,
    Monique

    #560547

    Hey Monique!

    1- Can you please elaborate on this one? I am not sure if i understood it clearly.
    2- Please add following code to Quick CSS

    @media only screen and (max-width: 480px) {
    #header #text-2 {
        width: 95%;
    }
    #header .av_one_half {
        width: 50%!important;
    }}

    Regards,
    Yigit

    #560678

    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.

    #561035

    Hi,

    Try the following CSS for your header widget:

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

    Regards,
    Rikard

    #561877

    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

    #562297

    Hi!

    The advanced_menu_toggle link is missing. Did you any modifications other than the double logo? I think you should remove the second logo on smaller screens because it will cover up the mobile menu. Try this in the Quick CSS field:

    @media only screen and (max-width: 768px) {
    .textwidget > .flex_column:nth-child(2) {
        display: none;
    }
    }

    And please update the theme to the latest version, 3.4.7.

    Best regards,
    Ismael

    #562707

    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

    #563785

    Any options please?

    #564539

    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

    #565505

    Hey!

    quite difficult to imagine what you want. Can you provide us a precise mockup showing the results you want to achieve please? then we can provide you some precise css code to achieve exactly what you need. Use imgur.com or dropbox.

    Best regards,
    Andy

    #565615

    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

    #566880

    Hey!

    Thank you for the screenshots. The second one looks like the better option so you can try this:

    @media only screen and (max-width: 767px) {
    .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: 50%;
        margin-top: -15px;
        margin: 0 auto;
    }
    }

    Cheers!
    Ismael

    #567899

    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

    #568645

    Hi!

    it does not look like this for me. Which browser and OS are you using?
    Or could you fix it already? your website looks totally good to me.

    Cheers!
    Andy

    • This reply was modified 8 years, 2 months ago by Andy.
    #568729

    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

    #569376

    Hey!

    1.) Use this code to hide this second logo on desktop only:

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

    You can adjust min-width value, which stands for screen size.

    2.) I checked it on Chrome emulator for Samsung Galaxy S3 and on my own htc one s mobil phone and on both it looks like this for me:

    View post on imgur.com

    Please clear browser cache and check on another device as well.

    Best regards,
    Andy

    #569463

    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

    #569910

    Hi!

    1.) Telling date and time of a post/thread does not help at all, please provide a precise link instead. Use screenshots and a precise link to show what you mean, I can’t see any grey bar at all. Clear browser cache and hard refresh a few times.

    2.) Alright. It does display fine on my htc one s mobile device, as already said. Let’s see what happens when you check on a different device.

    Best regards,
    Andy

    #570031

    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

    #570042

    Hi!

    1.) use this code:

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

    2.) Alright.

    Best regards,
    Andy

    #570380

    Hi Andy,

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

    Enjoy your weekend,
    Monique

    #571081

    Hey!

    I checked the site today and the mobile menu hide button is missing or misplaced. It’s because of the following code:

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

    .. Replace “none” to “block” and then find this set of code:

    @media only screen and (max-width: 990px) {
    #advanced_menu_toggle, #advanced_menu_hide {
        position: relative;
        right: auto;
        top: 30%;
        margin-top: -15px;
        margin: 0 auto;
    }
    }

    Remove the “, #advanced_menu_hide” part. Or replace it with:

    @media only screen and (max-width: 990px) {
    #advanced_menu_toggle {
        position: relative;
        right: auto;
        top: 30%;
        margin-top: -15px;
        margin: 0 auto;
    }
    }
    

    Cheers!
    Ismael

    #571182

    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

    #571204

    Hey!

    well, your website seems totally fine to me, so no need to change a running system I think :).

    Let us know if you experience any problems in a new ticket and we are happy to support you.

    Cheers!
    Andy

    #571211

    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

    #571248

    Hi!

    thank you! Have a nice day as well!

    Regards,
    Andy

Viewing 26 posts - 1 through 26 (of 26 total)
  • The topic ‘Two logos in header’ is closed to new replies.