Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #733478

    Hello,

    I added phone number and the address in the section “Header Phone Number/Extra Info” in the Header.

    Now it above the logo like this and I would like it be align with the logo instead and also increase the font size.

    What custom CSS do I need for this ?

    Thank you so much

    #733488

    I figure out how to align it and change the font size by using the following custom css code :

    .phone-info { font-size: 18px; }
    div.phone-info {
    position: relative;
    top: 80px;
    }

    The problem is that now there is a huge white space between the top of the page and the logo. How can I reduce it so the logo and phone number are closer to the top of the page ?

    #733513

    Hi,

    I cannot see the issue in the link you provided so i’ll guess it’s because of the position relative.

    However if you like to add phone number and contact info in the header area next to main menu enable header widget area http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/

    And add the code mentioned here check https://kriesi.at/support/topic/header-32/#post-733494

    Let us know if you have any questions.

    Best regards,
    Vinay

    #733514

    Would it be possible to just do it with a custom CSS code ? I tried to do the widget thing but it did not work for me.
    I attach again the link and password of the website in this post so you can see what I am talking about.

    #733560

    Hi,

    Please remove the custom code you added and post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Best regards,
    Vinay

    #733638

    Thank you. I removed the custom CSS code for the header.

    #733949

    Hi,

    Thank you for making the changes. We have added the below css in Quick CSS please review the site :)

    /* Header Widget*/
    #top-info .main_menu{
    margin-right:0px;
    }
    .widget-info .top-info {
    display:block;
    clear:both;
    }
    #header_main .widget {
    clear:none!important;
    top-info:0%;
    transform:translateY(-100%);
    right:0;
    font-size:11px;
    position:absolute;
    line-height:14px!important;
    }
    .main_menu {
        clear: none;
        position: absolute;
        z-index: 100;
        line-height: 30px;
        height: 100%;
        margin: 0;
        left: 20%;
    } 
    
    @media only screen and (max-width:989px) {
    #header_main .widget {
    right:90px;
    }}
    
    .widget-info .top-info:before, .widget-info .btm-info:before {
      display: inline-block;
    font-family: "dashicons"!important;
      text-decoration: none;
      speak: none;
    position:absolute;
    left: -20px;
    }
    .widget-info .top-info:before {
      content: "\f525";
    }
    .widget-info .btm-info:before {
      content: "\f102";
    }

    Best regards,
    Vinay

    #733957

    Thank you so much! I really appreciate your help :)

    I just have two problems.. It’s too high right now (address, phone number) How can I bring the text down ? (like this : see screenshot 1)

    Also, the phone number & address do not display in the header on mobile… (see screenshot 2)

    Can you help me with this ? I left you full admin access to my site if needed!

    Thank you again! You guys are amazing support!

    Edit : I just realized that I cannot see the phone and home icon that you put next to the address and phone number on Safari but it is working for Firefox..

    • This reply was modified 7 years, 11 months ago by 805ITS.
    #735499

    Hi,

    this is quite confusing here. Please always stick to one issue in one ticket only and feel free to open another one for different questions/issues.

    So are you talking about your header widget? if yes use this code to control it’s

    position: 
    div#text-7 {
    top: 18px;
    }

    and adjust as needed.

    Best regards,
    Andy

    #736074

    Not working… I was able to figure out to do what I wanted. The text is now aligned with the logo and the icons are displayed properly on all browsers. I added the following CSS code for those who wants to do the same :

    <style>
    #top-header-contactinfor {
    font-size: 14px;
        line-height: 18px;
        position: relative;
        top: 15px;
    }
    #top-header-contactinfor .top-info:before {
    display:none!important;
    }
    #top-header-contactinfor .btm-info:before {
    display:none!important;
    }
    
    @media all and (min-width: 320px) and (max-width: 550px) {
    	.main_menu .avia-menu, #header_main_alternate, .fallback_menu {
        display: block;
        clear: both;
    }
    #header_main_alternate .main_menu { display:none; }
    #top #header_main_alternate {
        background-color: #2c353d;
        margin-top: 27%;
    width: 105%;
    }
    }
    @media all and (min-width: 551px) and (max-width: 650px) {
    	.main_menu .avia-menu, #header_main_alternate, .fallback_menu {
        display: block;
        clear: both;
    }
    #header_main_alternate .main_menu { display:none; }
    #top #header_main_alternate {
        background-color: #2c353d;
        margin-top: 15%;
    }
    }
    
    </style>
    #736076

    Hey!

    Thank you very much for reporting back, we do appreciate it a lot.
    Please feel free to let us know what else we can do for you and always remember to rate Enfold at themeforest, we do need that!

    Thank you

    Best regards,
    Basilis

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