Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • March 31, 2017 at 11:34 pm #770202
    gtekit

    Hi Guys;

    Thanks for the enfold theme and your fantastic support so far !!!

    Is it possible for me to add another custom widget are to the header of my site? I am currently using a custom widget area using the function described here to display my search provided by a secondary plugin which works very well. I have the search custm widget centred in my header using css, I would like to add another custom widget area to the right to display some custom font awesome icon links and possibly shorcodes for login / logout etc. I have the enfold basket attached to the header and would like to display these links next to it.

    View post on imgur.com

    so I have this in my child themes functions.php . . .

    add_action( 'ava_main_header', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
	dynamic_sidebar( 'header' );
}

    and css

    #header .widget {
  left: 50%;
  padding-top: 0;
  position: absolute;
  top: 0;
  transform: translate(-50%);
  z-index: 999;
}

    Can I add a similar function and position the content to the right of my header (next to my cart) with some custom shorcode or links.

    Regards

    Pete

    • This topic was modified 7 years, 7 months ago by gtekit.
    April 1, 2017 at 7:05 am #770244
    John Torvik

    Hey Pete,

    Please, may you share your WP credentials and the website link?

    Best regards,
    John Torvik

    April 1, 2017 at 10:41 am #770279
    gtekit

    Hey John,

    I have supplied the WP credentials, as required, Thanks for the quick response, hope you can help me out :)

    Regards

    Pete

    April 2, 2017 at 10:54 am #770588
    Rikard

    Hi,

    You should be able to add as many widgets as you want with the code you posted:

    add_action( 'ava_main_header', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
	dynamic_sidebar( 'header1' );
        dynamic_sidebar( 'header2' );
}

    Just make sure to name them properly under Appearance->Widgets. You will need to change the CSS as well. For the first one you can try something like this:

    #header #ajaxsearchprowidget-6 {
  left: 50%;
  padding-top: 0;
  position: absolute;
  top: 0;
  transform: translate(-50%);
  z-index: 999;
}

    Best regards,
    Rikard

    April 4, 2017 at 3:18 pm #771814
    johnworfin

    I am trying to do the exact same thing as the original poster. This is what I have in my functions:

    
add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
	dynamic_sidebar( 'header' );
	dynamic_sidebar( 'header2' );
}

    the widgets are named header and header2 this is my css:

    #header .widget {
  left: 50%;
  padding-top: 10;
  position: absolute;
  top: 0;
  transform: translate(-50%);
  z-index: 999;
}

#header2 .widget {
  left: 90%;
  padding-top: 10;
  position: absolute;
  top: 0;
  transform: translate(-50%);
  z-index: 999;
}

    Problem is my images are right on top of each other. I am assuming my css needs to be altered on header2.

    Thoughts?

    April 4, 2017 at 10:39 pm #772049
    Yigit

    Hi!


    @johnworfin     Please inspect elements on your widgets and target them using ID’s – http://i.imgur.com/UzrzBfJ.png
    In the example above, selector should be 

    #header #text-14 { opacity: 0.5; }

    Regards,
    Yigit

    April 5, 2017 at 2:55 pm #772598
    johnworfin

    Thank you-that pointed me in the right direction.

    April 5, 2017 at 3:24 pm #772611
    johnworfin

    Well, the css works fine with my first added header widget, but not the second one:

    #header #text-2 {
    left: 50%;
    padding-top: 10;
    position: absolute;
    top: 0;
    transform: translate(-50%);
    z-index: 999;
    }

    #headerB #text-6 {
    left: 50%;
    padding-top: 10;
    position: absolute;
    top: 0;
    transform: translate(-75%);
    z-index: 999;
    }

    It’s ignoring the css for whatever reason. I have triple checked the code, and it is text-6.

    a screen shot-the second header image is behind the logo ignoring css.

    April 5, 2017 at 5:38 pm #772689
    Yigit

    Hi,

    Your code should be as following

    #header #text-2 {
left: 50%;
padding-top: 10;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
}

#header #text-6 {
left: 50%;
padding-top: 10;
position: absolute;
top: 0;
transform: translate(-75%);
z-index: 999;
}

    Best regards,
    Yigit

    April 5, 2017 at 5:46 pm #772694
    johnworfin

    getting there, but now my image to the far right is getting shrunk instead of displaying at full size. How do I get it to go to the far right and stay at full size?

    • This reply was modified 7 years, 7 months ago by johnworfin.
    April 5, 2017 at 7:08 pm #772761
    johnworfin

    My current css:

    #header #text-2 {
left: 50%;
padding-top: 10;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
}

#header #text-6 {
left: 85%;
padding-top: 10;
position: absolute;
top: 0;
transform: translate(-75%);
z-index: 999;
}
    April 5, 2017 at 8:57 pm #772835
    johnworfin

    never mind-I figured it out, the search icon from the main menu was reducing the size of my image. Is there any way to move the main menu to where the secondary menu is? At the top?

    Thanks,

    April 6, 2017 at 3:11 pm #773237
    Yigit

    Hi,

    Replied to your thread here – https://kriesi.at/support/topic/how-to-disable-main-menu/
    Let us continue there :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Adding multiple widget areas to the header’ is closed to new replies.