Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 18, 2023 at 2:48 pm #1419476
    woogie07

    Hi,

    I need to push 2 x telephone numbers above my header.
    Is this best done as extra elements in the header
    I also need to add coding so the phone numbers link
    Where do I colour style the background and number colour? White copy #ffffff on Grey #969696

    Thanks

    September 19, 2023 at 4:45 am #1419520
    Ismael

    Hey woogie07,

    Thank you for the inquiry.

    You can add the phone in a text widget, then insert it to the header using an action hook. Please check the documentation below for more info.

    // https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

    Best regards,
    Ismael

    September 19, 2023 at 10:03 am #1419546
    woogie07

    If I use the standard ‘Extra element’ to add copy to the top.

    1/ Where/what coding do I need to add so the phone numbers link
    2/ Where do I colour style the background and number colour? White copy #ffffff on Grey #969696
    3/ What is the CSS to make the font larger?

    September 19, 2023 at 1:18 pm #1419564
    Rikard

    Hi,

    1. https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_phoneto

    2 and 3:

    header_meta {
    background: #969696;
}
    .phone-info div {
    color: #fff;
    font-size: 14px;
}

    Best regards,
    Rikard

    September 21, 2023 at 9:39 am #1419846
    woogie07

    hi

    Is there any coding that can be added that makes the phone number top section sticky on desktop and mobile – without effecting any other sections?

    Thanks

    September 21, 2023 at 12:30 pm #1419895
    Ismael

    Hi,

    Thank you for the update.

    makes the phone number top section sticky on desktop and mobile

    Yes, that should be possible. Please add this css code and make sure that the Enfold > Header > Header Behavior > Unstick Topbar option is deactivated.

    #header_meta {
    position: fixed;
    width: 100%;
}

#header_main, .header_bg {
    top: 30px;
}

    Best regards,
    Ismael

    September 21, 2023 at 1:03 pm #1419902
    woogie07

    Thanks

    That makes the number sticky but not the main header/logo+burger menu.

    It may be my cache but the number secondary top menu is not sticky on desktop.

    Thanks

    September 22, 2023 at 4:41 am #1419977
    Nikko

    Hi woogie07,

    Please add Ismael’s code again and then add this CSS code as well:

    #top #header {
    margin-top: 0 !important;
}

    Let us know if it helps.

    Best regards,
    Nikko

    September 22, 2023 at 9:41 am #1420003
    woogie07

    Thanks

    The logo and burger menu still aren’t sticky on mobile?

    September 23, 2023 at 3:11 pm #1420117
    Nikko

    Hi woogie07,

    Please try to add this CSS code:

    @media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header {
    position: fixed;
  }

  .responsive #top #wrap_all #main {
    padding-top: 113px !important;
  }
}

    Best regards,
    Nikko

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