Tagged: , ,

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #467789

    I need help creating a header where I can place two logos side by side (left justified), add a phone number to the right, and make the menu below look similar to what I have comped up. Not sure if possible, but thought I’d ask. Thank you!

    Sample:

    View post on imgur.com

    #468170

    Hi Jehu!

    You can get the menu to display beneath the logo and centered in the header options, Dashboard > Enfold > Header.

    For the extra logo and phone number you could try adding a widget area to your header, http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/, and then drag a text widget to it and add the HTML in for those elements. Let us know when your done and we’ll give you some CSS to position it.

    Best regards,
    Elliott

    #498199

    I have followed the guid above to place a second logo into the header.
    It works fine, when viewed in full viewport, but as soon as i start making the browserwindow smaller, the 1st logo, and the menu will start overlaying ontop of the 2nd logo.

    Is there a css trick to make them not float, but stay besides, or wrap down to be stacked vertically?

    #498352

    Hi!

    Can you please post the link to your website so we can provide you an accurate custom CSS code?

    Cheers!
    Yigit

    #498378

    Sure, since this is just a demo site for a potential customer, its currently hosted as a subpage on my site. Link is in private data.

    #499193

    Hi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 1300px) and (min-width: 990px) {
    .logo * {
        max-width: 77%;
        top: 10px;
    }}
    @media only screen and (max-width: 1300px) {
    #mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
    nav.main_menu { display: none; }}

    Best regards,
    Yigit

    #499240

    Now it Works untill 990px, if smaller than that the second logo gets overlayed by the 1st logo.
    Picture:http://bildr.no/view/YWM2Wm9D

    Below 770PX, the second logo is pushed Down, that ok. But it floats above the other content (see this Picture)
    http://bildr.no/view/ZXVvbXFE

    #499280

    Hey!

    Do you mind creating a temporary admin login and posting it here privately so we can look into it?
    Also, Please go to Enfold theme options > Header > Mobile Menu > Header Mobile Menu activation and choose 990px

    Best regards,
    Yigit

    #499498

    No problem, info is attached in the private content

    #500282

    Hi!

    right now the account is a normal user account and we need admin access instead. Let us know when we can access your backend as admin.
    However, I can’t see on your website what you are showing on your screenshots. This “bubble” picture is not there for me and we need to inspect this element to be able to provide you some CSS code.

    Cheers!
    Andy

    • This reply was modified 8 years, 6 months ago by Andy.
    #500321

    Sorry, my bad.
    Gave you admin rights now.
    At the moment theres is nothing in the header widget, but you can insert a <img tag there to test.

    #501526

    Hi!

    I checked your website and your logo and header looks good to me. Could you fix it? or is the issue happening on a specific URL only? please show us where we can see the problem on your website.

    Cheers!
    Andy

    #501545

    Hi, the problem is like described and showed on the screenshots a few posts up. At the moment the image is removed from the widget area, because it was causing the problems. I wrote that you could add it again if you wanted to experience the problem. I’m am on my phone at the moment and can’t add the image from here.

    It’s the widget area I the header that is not responsive, the position when on phone is interfering with the left (1st) logo.

    #501612

    Hi!

    when I add an image to your header widget it looks totally different to your screenshot. That is why let us know when you are ready and when we can look into your issue with your widget header and inspect the elements.

    Regards,
    Andy

    #502548

    Ah I see. Its because we changed the header to “logo on the left, menu below”.
    Still the problem is the same. The second logo doesnt get placed where it should, and it wrappes wrong when resizing browser image.

    I have added the correct 2nd logo now.

    #502586

    Hey!

    thanks for adding the second logo to your header. When I shrink browser I can’t see any overlapping. Could you fix it?

    Regards,
    Andy

    #502596

    Yes, Ive been playing with the positioning. And by using negative margin I managed to make it stay a little more towards the top.
    When we shrink the browser page the second logo disapears when going below 990px.

    I guess its because of this code?

    @media only screen and (max-width: 1300px) and (min-width: 990px) {
    .logo * {
        max-width: 77%;
        top: 10px;
    }}
    @media only screen and (max-width: 1300px) {
    #mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
    nav.main_menu { display: none; }}
    

    Is it possible to not make it dissapear?

    #502726

    Hi!

    glad you managed it by yourself. Of course, just remove this code:

    @media only screen and (max-width: 1300px) {
    #mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
    nav.main_menu { display: none; }}
    

    Best regards,
    Andy

Viewing 18 posts - 1 through 18 (of 18 total)
  • You must be logged in to reply to this topic.