Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 2, 2015 at 10:12 pm #453401
    fjhughes

    I am trying to add some custom icons in the header area. This screenshot shows how it should look in the design, along with how it is currently. Right now, I have social icons turned on as well as my secondary menu, as I was trying out both scenarios.

    http://screencast.com/t/yAokZza1wt

    It doesn’t matter to me how I solve it, whichever way is easier. The end result needs to be, no white border at top, and the icons on top of the dark tread design background, and no border bars between icons.

    http://tsgaz.net/sfmd

    Thanks so much for any help you can give!

    -Fred

    June 3, 2015 at 5:31 pm #453962
    Elliott

    Hey Fred!

    It looks like your adding the icons inside the menu links with HTML. You can do this but it would take a bit of CSS work. I think it would be a lot easier to just add a widget area to your header and then drag a text widget to it and place the HTML inside that instead.

    See here for how to add a widget area to your header, http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/.

    Regards,
    Elliott

    June 3, 2015 at 7:11 pm #454015
    fjhughes

    Excellent! That worked. :) Take a look now. http://tsgaz.net/sfmd
    The only thing is, I would like the last icon on the right, to line up with the last menu item. Right now I have the following CSS:

    /* Header Widget Area */
#header .widget {
  right: 0;
  margin-right: 120px;
  padding-top: 0;
  position: absolute;
  top: -90px;
  transform: translate(-50%);
}

    I’ve tried various things, like float: right; with margin and changing ‘right: 0’ to other values, but I couldn’t get it to look how I wanted it. Right now it varies depending on how far you stretch your browser. What can I do to line it up with the last menu item?

    Thanks!

    June 4, 2015 at 9:47 am #454320
    Rikard

    Hi Fred!

    I don’t think it would be a good idea to line them up after the last menu item since you will get into a lot of trouble on medium and smaller screens. The icons will overlap your menu and it will take a lot of CSS in order to make it look good. I would leave them where they are now but we’ll be happy to help you out if you still should want another look.

    Cheers!
    Rikard

    June 4, 2015 at 9:14 pm #454740
    fjhughes

    Thanks for the reply Rikard. I will take the advice and not mess with it anymore. :-)

    -Fred

    June 5, 2015 at 8:50 am #454991
    Rikard

    Hi Fred!

    Great :)

    Please get back to us if you should have any more questions or problems.

    Cheers!
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Add custom icons in header area’ is closed to new replies.