Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 31, 2016 at 3:52 pm #667001
    firemedic72

    I was wondering if anyone could show me how to completely customize my header area in Enfold stretched theme. I was able to insert content and images to the right of my logo by placing the code below. It looks ok I guess, but I am just not completely satisfied with it because it is not responsive and disappears on mobile devices and tablets. Is there any possible way to edit the the header so that the content added to the right is responsive and folds to the left under the header like responsive <div></div> would do?

    functions:

    <div class=”custom_text”>
    <p style=”font-family: lato; font-style: normal; font-weight: 400; font-size: 16pt;”>Phone (813)949-4467</p>
    </div>
    <div class=”custom_text2″>
    <p style=”font-family: lato; font-style: normal; font-weight: 400; font-size: 14pt;”>Email: S (Email address hidden if logged out) </p>
    </div>
    <div class=”custom_text3″>
    <p style=”font-family: lato; font-style: normal; font-weight: 400; font-size: 16pt;”><span style=”color: #FC0004; font-weight: 700;”>10% OFF</span> For Online Appointments!</p>
    <p> </p>
    </div>
    <div class=”custom_phone”>phone
    </div>
    <div class=”custom_mail”>Mail
    </div>

    Quick CSS

    div.custom_text {
    position: absolute;
    right: 200px;
    top: -175px;
    }

    div.custom_text2 {
    position: absolute;
    right: 208px;
    top: -135px;
    }

    div.custom_text3 {
    position: absolute;
    right: 75px;
    top: -105px;
    }

    div.custom_phone {
    position: absolute;
    right: 435px;
    top: -165px;
    }

    div.custom_mail {
    position: absolute;
    right: 422px;
    top: -122px;
    }

    • This topic was modified 8 years, 4 months ago by firemedic72.
    August 4, 2016 at 3:47 am #668349
    Ismael

    Hey firemedic72,

    Thank you for using Enfold.

    We can toggle the display of those elements on mobile. However, there is not enough space to accommodate those extra info on mobile view. Where do you want to place them? 

    @media only screen and (max-width: 989px) {
.responsive.html_mobile_menu_tablet #header_main_alternate {
    display: block;
}

.html_header_top.html_bottom_nav_header .main_menu {
    display: none;
}

}

    Best regards,
    Ismael

    October 9, 2016 at 4:46 am #696965
    Micheal0424

    I really like this code, that is such a needed feature for Enfold.

    I see all of these website with that kind of information in the header area and it is so beneficial.

    Where is the link to submit requests for features?

    Thank you.

    October 9, 2016 at 7:26 am #696986
    Vinay

    Hi,

    Please feel free to request such feature at our feature request system: https://kriesi.at/support/enfold-feature-requests/

    Thank you for using Enfold :)

    Best regards,
    Vinay

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