Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 16, 2015 at 9:56 am #429453
    thatsmyname

    Hello,

    is there a way to address the height of the transparent header via quickcss individually from the normal header? i haven’t found sth. via forum search yet.

    thanks
    Stefan

    • This topic was modified 9 years, 7 months ago by thatsmyname.
    April 16, 2015 at 4:15 pm #429705
    Yigit

    Hey thatsmyname!

    Can you please elaborate on the changes you would like to make? A link to your website would help us provide you accurate custom CSS code if customization you are asking is doable

    Best regards,
    Yigit

    April 16, 2015 at 4:54 pm #429738
    thatsmyname

    Hello Yigit,

    thanks for your reply. I put the private data into the private box of my initial post.
    I like to set the height of my normal headers ( 60px ) as usual via the enfold settings. And then i would like to set a custom height of 120px for the transparent header which is currently active on the “projects” page.

    best regards,
    Stefan

    April 17, 2015 at 10:34 am #430212
    Ismael

    Hey!

    Use this in the Quick CSS field:

    .page-id-12 #header_main > .container, .page-id-12 #header_main > .container .main_menu ul:first-child > li > a, .page-id-12 #header_main #menu-item-shop .cart_dropdown_link {
  height: 120px !important;
  line-height: 120px !important;
}

.page-id-12 strong.logo {
  top: 30px;
}

    Best regards,
    Ismael

    April 17, 2015 at 11:44 am #430245
    thatsmyname

    Hello Ismael,

    thank you for your response!

    It works partially, the header is higher, but the main site content is not moving down.

    And i would like to have more height for the logo as well. I tried adding “height:” into the “.page-id-12 strong.logo {” code, but obviously this doesn’t work.

    with .page-id-12 you are addressing this page in particular. is it possible to address all transparent headers? as if the height would be an option under “Enfold Settings”>”Header”>”Transparency Options”.

    best regards
    Stefan

    • This reply was modified 9 years, 7 months ago by thatsmyname.
    April 19, 2015 at 8:00 am #430829
    Ismael

    Hey!

    You can adjust the content top padding with this:

    .html_header_transparency #top .avia-builder-el-0 .container {
  padding-top: 200px;
}

    Replace the code with this to affect all transparent headers: 

    .html_header_transparency #header_main > .container, .page-id-12 #header_main > .container .main_menu ul:first-child > li > a, .page-id-12 #header_main #menu-item-shop .cart_dropdown_link {
  height: 120px !important;
  line-height: 120px !important;
}

.html_header_transparency strong.logo {
  top: 30px;
}

    Cheers!
    Ismael

    April 19, 2015 at 8:59 am #430841
    thatsmyname

    Excellent! your support is unbelievable.

    i found that the logo height is not affected as long as the logo width is not addressed as well. so i did this to increase the logo size:

    .html_header_transparency strong.logo {
  top: 20px;
  height: 80px;
  width: 80px;
}

    and just for future forum searches and copy&paste capability, since you left some “.page-id-12” parts in there.. here comes the full code which i am using right now:

    .html_header_transparency #top .avia-builder-el-0 .container {
  padding-top: 120px;
}

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

.html_header_transparency strong.logo {
  top: 20px;
  height: 80px;
  width: 80px;
}

    thanks so much!
    Stefan

    April 19, 2015 at 11:08 am #430852
    thatsmyname

    i recognized that these settings are overwriting some elements of the mobile header as well.
    so i added this code here to fix ( and by the way customize ) the mobile header:

    @media only screen and (max-width: 768px) {

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

.responsive #top .logo {
  display: inline;
  width: 80%;
}
.responsive .logo img {
  height: 55px !important;
  max-height: 55px;
  padding-top: 5px;
  padding-bottom: 5px;
  left: 0px;
}

}

    best regards
    Stefan

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘different height for transparent header’ is closed to new replies.