Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 15, 2019 at 2:40 am #1157036
    micom6150

    Hello Support,

    I’m trying to figure out how to have the icon next to my phone number, email, and hours in the extra elements menu above the header. I managed to get the the Phone and email working but cant seem to figure out how to get the clock next to the hours.

    I’m using this short-code which I found in another thread

    
span.custom-header-meta {
    float: left;
    display: block;
    height: 20px;
    line-height: 20px;
    padding-right: 10px;
}

@media only screen and (max-width: 767px) {
  .responsive .phone-info span {
    padding: 0 3px;
  }
}
    November 15, 2019 at 9:41 pm #1157317
    Victoria

    Hey micom6150,

    Please have a look at the following solutions:

    Adding a Button next to Phone Number in top bar

    https://kriesi.at/support/topic/phone-number-next-to-logo-menu/

    If you need further assistance please let us know.
    Best regards,
    Victoria

    November 15, 2019 at 9:55 pm #1157328
    micom6150

    Hello Victoria,

    Thank you for getting back to me. I tried following that thread but it is a little above my head. I’m trying to get the clock icon next to the hours in the top bar.

    November 16, 2019 at 4:06 pm #1157486
    Victoria

    Hi micom6150,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    November 18, 2019 at 8:43 pm #1157948
    micom6150

    Sure, I added that to the private section at the bottom.

    November 20, 2019 at 4:13 pm #1158530
    Victoria

    Hi micom6150,

    I adjusted the code for you. Please check.

    Best regards,
    Victoria

    November 21, 2019 at 1:47 am #1158669
    micom6150

    Looks great. On mobile is there a way for these 3 things to show up smaller? Right now they are on 2 lines.

    November 22, 2019 at 5:39 pm #1159242
    Victoria

    Hi micom6150,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 479px) {
  .responsive #top .phone-info {
       text-align: left;
       font-size: 9px;
  }
  .responsive #top #wrap_all #header_meta .container {
    width: 95vw;
    max-width: 95vw;
    margin-left: 20px;
    
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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