Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • January 18, 2016 at 2:55 am #566867
    loraehmke

    Hi there!

    I set my header layout to be logo left / menu below. I would like the phone number/extra info/social to display in the main header area, directly across from the main logo (to the right of the logo and in line with it). Currently, the phone number/extra info is in the top bar to the right, which adds extra space to my header because I’m using 3 lines of text for the extra info.

    If I attempt to add padding, it pushes the entire menu up or down, which is not what I’m looking for.

    I would like to use this layout for the both transparent and regular headers.

    Thanks in advance for taking a look at it!

    Lora

    January 18, 2016 at 8:18 am #566978
    Rikard

    Hi loraehmke,

    Could you try to put the info in the same span, without any breaks, and then apply the following CSS in Quick CSS to see if that works out for you?

    .phone-info {
min-width: 500px !important;
}

    If not then you could try adding a widget to your header: http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/

    Regards,
    Rikard

    January 18, 2016 at 5:28 pm #567279
    loraehmke

    Hey Rikard,

    Thanks for the tip about adding a widget to my header. I initially tried your suggestion but the phone info/extra text wasn’t working properly as part of the top bar. So I created a header widget as you suggested.

    The header widget well except in mobile view (the header widget overlaps the header logo and starts to overlap the slider on the home page). Any ideas how I can go about fixing that?

    This is the CSS I added for the header widget:

    #header .widget {
    left: 75%;
    padding-top: 20px;
    position: absolute;
    top: 0;
    transform: translate(-50%);
    z-index: 999;
    color: #1a1a1a;
    font-weight: bold;
    line-height: 1.3;
    }
    Thanks in advance for your help. Love your theme!

    January 19, 2016 at 5:58 am #567620
    Rikard

    Hi,

    There’s not enough space in the header to display your widget on phone size screens. I would recommend you add the info to a color section and it give it a unique ID, for instance #phone-mobile. You can then hide the section for all other screen sizes using the following CSS: 

    @media only screen and (min-width: 768px) {
#phone-mobile{
display:none !important;
}
}

    And hide the widget for mobile:

    @media only screen and (max-width: 767px) {
#header .widget {
display:none !important;
}
}

    Best regards,
    Rikard

    January 20, 2016 at 12:07 am #568254
    loraehmke

    Excellent idea! Works great. I appreciate your help.

    January 20, 2016 at 9:16 am #568444
    Rikard

    Hi,

    Glad we could help :-)

    Thanks,
    Rikard

    January 27, 2016 at 11:47 am #572763
    jinsley8

    Hi,

    I also tried the php snippet you mentioned. Is there a way to put the new widget inside the #header-main .av-logo-container?

    When I use the left: % style with the suggested css it moves outside my page width when I zoom out or use on large monitor. I want to keep it within page width at all times.

    January 27, 2016 at 6:57 pm #573174
    Yigit

    Hey!


    @jinsley8     Can you please post the link to your page so we can see the issue? Also, please post a screenshot and show the changes you would like to make.

    Best regards,
    Yigit

    January 27, 2016 at 7:32 pm #573210
    jinsley8

    Hi Yigit,

    I’m developing the site right now in my local environment but hopefully these screenshots will help explain.

    This is what I’m experiencing now – https://www.dropbox.com/s/y2s5qlc1qp0tbda/dev.jpg?dl=0

    As you can see the PHP snippet to add widget to header, adds it above the logo container.

    I need the phone number section to be right of the logo like this within it’s container – https://www.dropbox.com/s/w6c6hulplbqkpdl/final.jpg?dl=0

    How it is now, I can position it absolute, but it is relative to window width not the page width.

    January 27, 2016 at 7:37 pm #573215
    jinsley8

    I also tried editing /includes/helper-main-menu.php to move the top bar phone section to the logo container <div class="inner-container"> but it wouldn’t work.

    It kept putting it outside the whole area like it is using the wdiget.

    January 28, 2016 at 4:21 pm #573816
    Vinay

    Hi!

    To achieve this you need to add a widget area in the header please follow the steps in the below link
    http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/

    You can also add the phone number in sub header from Enfold > Header > Extra Elements > Header Phone Number/Extra Info

    Cheers!
    Vinay

    • This reply was modified 8 years, 10 months ago by Vinay.
    January 29, 2016 at 11:51 am #574434
    jinsley8

    I’ve done both.

    What I just showed you in screen shot is result of adding a text widget in header using those instructions. It is outside of the logo container.

    I can place the widget area to the right using position: absolute; but it is relative to the window width and not the page width.

    January 31, 2016 at 7:45 am #575188
    Ismael

    Hi!

    There’s no available action or filter for that but you don’t need to place the widget inside the logo container. Set the position of the header widget to absolute then modify the custom css code provided in the documentation:

    #header .widget {
  padding-top: 0;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 500;
}

    Regards,
    Ismael

    February 1, 2016 at 6:22 am #575562
    hugaud

    @loraehmke
    Hi, I’m looking to do the same with extra information (phone number / contact email) in the header and have been reading your post and support reply for inspiration.
    Would it be at all possible for you to post a link to your site so I could see the result of your css / widget in header ?
    Thanks in advance
    Hugues

    February 2, 2016 at 5:43 am #576238
    Rikard

    Hi @hugaud,

    I’m not sure if the original poster is willing to share the site, but link to yours and we’ll help you out to get the looking you want.

    Best regards,
    Rikard

    February 25, 2018 at 8:23 am #917316
    PestkaStudio

    Hello,
    i am quite new to enfold and have some questions.

    http://www.granit.pl

    1. how to make my telephone number bigger and be placed before social media icons
    2. how to make social icons bigger?
    2. whenever i choose telephone number to show in ENFOLD/header/extra elements my WPML flags are jumping from menu bar up above my logo, but i want my flags to stay in menu bar as before.

    please help!
    thank you
    Maciej

    February 25, 2018 at 7:05 pm #917511
    Basilis

    Hi,

    Please create your own ticket, so we can be able to investigate more or even ask for access so we can review your web site.

    Thank you very much

    Best regards,
    Basilis

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Move Header phone number/extra info to display in Main header area’ is closed to new replies.