Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #402954

    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, 8 months ago by jordandsa.
    #403589

    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

    #407348

    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’ );
    }

    #407818

    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

    #408566

    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!

    #408714

    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

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