Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • February 22, 2016 at 11:46 am #587028
    samurai_666

    I want to integrate a big full width banner on top of the site (“Qualitätsmarke”), but the existing header options do not allow that.

    What have I to do (change php?) to obtain a full width site header/banner.

    My site is just in the beginning, there has nothing been done yet substantiallly:

    http://www.e-marke-test.at/

    Thank you in advance for your support!

    February 22, 2016 at 12:01 pm #587037
    Yigit

    Hey samurai_666!

    You are currently inserting your logo in 300x35px, please firstly upload a bigger logo. Then according to your logo height, go to Enfold theme options > Header and change header height. Then let us know so we can provide you custom CSS if needed

    Best regards,
    Yigit

    February 24, 2016 at 3:20 pm #588418
    lpongo

    Hi, I would like to do the same thing:
    To have a huge logo (75vh) in the header that shrinks to 150px height when user scrolls down.
    I can’t find a place to change the header max-height property which I can only set to 300px in the header control.

    Best,

    lpng

    February 25, 2016 at 9:16 am #588824
    Rikard

    Hi @lpongo,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Thanks,
    Rikard

    February 25, 2016 at 2:40 pm #589113
    samurai_666

    Hello!

    That does not work. I do not know why, I have now uploaded a logo of 1900×224 px. I put max. height of 300, but it does not work.

    Please advice what I have to change in the PHP or CSS!

    here is my site:

    http://www.e-marke-test.at

    best regards and thanks for your help

    February 25, 2016 at 2:48 pm #589127
    Yigit

    Hey!

    You still seem to be inserting your logo not in full size. Do you mind creating a temporary admin login and posting it here privately?

    Cheers!
    Yigit

    February 26, 2016 at 6:30 pm #589931
    samurai_666

    Heres the data.

    below

    best regards

    Gerhard

    February 26, 2016 at 8:43 pm #590000
    Yigit

    Hey!

    I changed header height to 170px and added following code to Quick CSS in Enfold theme options > General Styling tab

    .html_header_top.html_logo_center .logo {
    left: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}
.container.av-logo-container {
    width: 100%!important;
}

    please review your website now

    Regards,
    Yigit

    February 27, 2016 at 5:07 pm #590256
    samurai_666

    Thank you very very much, it is perfect now!

    Gerhard

    March 1, 2016 at 5:09 am #591329
    Rikard

    Hi Gerhard,

    Great, glad we could help :-)

    Regards,
    Rikard

    March 1, 2016 at 6:39 pm #591738
    samurai_666

    Hi Rikard!

    Thank you very much again. Only problem is that it is not responsive, as seen with wide screens, the banner/header just does not expand but only up to it’s maximum size according to media file.

    Shall I upload a bigger file, or can this be done by CSS?

    best regards

    Gerhard

    March 3, 2016 at 7:20 pm #592827
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
.container.av-logo-container {
    max-width: 100%!important;
    margin: 0!important;
}
.responsive .logo a { display: block; }
.responsive #top .logo {
    width: 100%;
    height: 100%!important;
}}

    Regards,
    Yigit

    March 3, 2016 at 7:29 pm #592837
    lpongo

    Sorry for the delay,

    Please find the link hereby included.

    Best,

    • This reply was modified 8 years, 9 months ago by lpongo.
    March 3, 2016 at 7:34 pm #592846
    Yigit

    Hi!


    @lpongo     You most certainly have a huge logo :)
    Can you please elaborate on the changes you would like to make? In your case, i believe, it would be the best if you went to Enfold theme options > Header > Header Behaviour and disable “shrinking header” option

    Cheers!
    Yigit

    March 3, 2016 at 7:48 pm #592865
    lpongo

    Haha, Yes,

    The idea is to have a huge logo, centered, on top, and responsive, and to let it shrink to max ~300px high when scrolling down (hence the shrinking header option).
    My problem is that I can’t make it responsive while keeping the original ratio and being so big :-/

    Edit 06.03.2016:

    Ok, I’ve managed to make it bigger and take more space (still not enough but that’s just a matter of trial and error).
    However, I still can’t get it to shrink correctly. the logo shrinks but only vertically (it doesn’t keep the original image ration) and the containing div doesn’t shrink. That’s the part I don’t get…

    March 7, 2016 at 4:53 pm #594428
    Yigit

    Hi!

    Please remove following code from Quick CSS 

    #top #header_main > .container, #top #header_main > .container .main_menu ul:first-child > li > a, #top #header_main #menu-item-shop .cart_dropdown_link {
    height: 400px!important;
    line-height: 600px!important;
}

    and add following 

    .logo {
    width: 100%!important;
}

.logo img {
    width: auto;
    margin: auto!important;
}

    Regards,
    Yigit

    March 7, 2016 at 5:08 pm #594439
    lpongo

    Thank you Yigit,

    This works but sets me back to a 300px high logo, while I would like it to be more ~1000px high (85vh would be best actually).
    How can I achieve that?

    March 14, 2016 at 3:50 pm #597798
    Andy

    Hey!

    try this code in Quick CSS field:

    strong.logo a img {
height: 1000px !important;
max-height: 1000px !important;
}

    Cheers!
    Andy

    March 15, 2016 at 12:25 am #598052
    lpongo

    Not working at all (only changes the image, and looks disproportioned + the container is still too small :-/)

    March 15, 2016 at 10:07 am #598280
    Andy

    Hey!

    not sure what you are trying to achieve. A mockup showing exactly the results you want would help a lot. Try to add this code too:

    .logo, .logo a {
height: 1000px !important;
max-height: 1000px !important;
}

    Best regards,
    Andy

    March 21, 2016 at 12:15 pm #601174
    lpongo

    Still not working, please find hereby attached a mockup.
    The idea is to have a huge header image which scrolls down to ~15% of the original when scrolling down the page. The sizes should be more like 1000px>200px instead of the current 300px>100px

    March 25, 2016 at 8:07 am #603585
    Ismael

    Hey!

    I checked the site and the logo is different compare to the screenshot. The text “The Roughouse” are inline. Do you still want to implement the logo design?

    Regards,
    Ismael

    April 6, 2016 at 3:25 pm #609005
    samurai_666

    Greetings from Vienna!

    Sorry to bother you again, but as I checked my website again, the banner disappeared altough it was already perfectly woking: full size header and responsive, due to your support a few weeks ago.

    But now: problem is as before, the header does not expand….what could have happened?

    Here is my access-data for help below in private content.

    Thanks in advance for your guidance and best regards

    April 7, 2016 at 12:06 pm #609517
    Andy

    Hey!

    which changes did you make? did you add any plugins for example? please try to deactivate all of your plugins to check which one is causing this issue. Is your host using any caching on your server?

    Best regards,
    Andy

    April 8, 2016 at 7:40 am #610052
    samurai_666

    Hi Andy!

    Sorry to have bothered you, I changed settings again: inserted your CSS and set header to 170px , and it works now perfect again!

    best regards

    Gerhard

  • Author
    Posts
Viewing 25 posts - 1 through 25 (of 25 total)
  • The topic ‘full width banner/header’ is closed to new replies.