Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • January 14, 2017 at 7:31 am #733478
    805ITS

    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

    January 14, 2017 at 7:49 am #733488
    805ITS

    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 ?

    January 14, 2017 at 10:49 am #733513
    Vinay

    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

    January 14, 2017 at 10:55 am #733514
    805ITS

    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.

    January 14, 2017 at 3:47 pm #733560
    Vinay

    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

    January 14, 2017 at 7:55 pm #733638
    805ITS

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

    January 16, 2017 at 9:04 am #733949
    Vinay

    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

    January 16, 2017 at 9:42 am #733957
    805ITS

    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, 10 months ago by 805ITS.
    January 18, 2017 at 7:43 pm #735499
    Andy

    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

    January 19, 2017 at 8:34 pm #736074
    805ITS

    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>
    January 19, 2017 at 8:37 pm #736076
    Basilis

    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

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