Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 26, 2015 at 8:20 pm #402954
    jordandsa

    PROBLEM:
    I’ve read multiple threads on how to add text and icons to the header in addition to the logo, but they either don’t do what I need, or the code breaks my site.

    I want it to look exactly like this jpeg. (link –>): HEADER EXAMPLE

    Logo, then on the right, two lines of text and custom social icons instead of the font version used by the theme default. I don’t want to use icon fonts for social links. I want to use actual .png or .jpgs.

    Also, how would I float the nav on the right side on the line below rather than right under the logo?

    Please keep in mind, I’m a novice. If you can explain exactly how to do it as if I were an idiot, that would be great :)

    Thanks,
    Jordan

    • This topic was modified 9 years, 10 months ago by jordandsa.
    February 27, 2015 at 6:46 pm #403589
    Elliott

    Hi Jordan!

    Go ahead and do this, http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/, to add a widget area to your header and then drag a text widget to it and then add your images and links inside the text widget.

    After doing that send us a link to your page and we’ll give you some CSS to move it to the area you want.

    Best regards,
    Elliott

    March 7, 2015 at 12:09 am #407348
    Joe Birch

    I have tried to add in the code so I can added some text and a small logo to the upper right area of header, above the navigation buttons.

    check out this page
    http://electju.wwwsr11.supercp.com/

    my header widget is currently centered “under” the navigation area. I would like to have it above in the white area.

    I feel I am close, can you help me with adjustments?
    CSS CODE:
    #header .widget {
    right: 50%;
    padding-top: 0;
    position: absolute;
    top: 0;
    transform: translate(-50%);
    }

    ——
    CODE FOR FUNCTION PHP:
    add_action( ‘ava_after_main_menu’, ‘enfold_customization_header_widget_area’ );
    function enfold_customization_header_widget_area() {
    dynamic_sidebar( ‘header’ );
    }

    March 9, 2015 at 2:57 am #407818
    Ismael

    Hey!

    Replace the css code with this:

    #header .widget {
right: 50%;
padding-top: 0;
position: absolute;
top: -100px;
transform: translate(-50%);
}

    Adjust the top and right position.

    Best regards,
    Ismael

    March 10, 2015 at 1:46 am #408566
    Joe Birch

    Hi Ismael,
    I am gettting close. what I would like to do is add an image to the white space. I often have clients ask for this feature.
    take a look at what happens when I added in image code to the header widget

    http://electju.wwwsr11.supercp.com/

    it take the place of the logo in the upper left corner. what do you work around that?
    thanks for your support, it makes me look good to my clients!

    March 10, 2015 at 10:36 am #408714
    Ismael

    Hey!

    Adjust the code. Use this:

    #header .widget {
right: 0;
padding-top: 0;
position: absolute;
top: -108px;
}

    Adjust the right position if necessary.

    Regards,
    Ismael

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