Trouble with Header Right…

Tagged: epik, header right

This topic has 5 replies, 2 voices, and was last updated 8 years, 7 months ago by Wes.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
August 29, 2015 at 3:23 am #16325
JokeAndBiagio
Customer
Hi,

I’m trying to place my social media icons similar to this:

http://jokeproductions.com

However, the closest I’ve been able to get is this:

http://tor.jokeproductions.com (that’s putting the icons in the secondary nav menu.)

I tried adding a second custom menu into header right, but I was unable to float these all the way to the right, or get the vertical space I needed between them, and when the page resized, I got two “hamburgers” instead of one, which looked weird.

Could someone point me in the right direction about a better way to place those two icons?

Thanks so much!
Biagio
August 29, 2015 at 9:19 pm #16335
Wes
Moderator
I looked at your source code and they both appear to be different. How did you add the icons on the first/main site? – http://jokeproductions.com Is that custom code or did you add them using widgets?
August 30, 2015 at 1:34 am #16342
JokeAndBiagio
Customer
Hey Wes,
Thanks for helping out. Yeah, that old site was built by a web designer about 6 years ago, and it’s an outdated mess. Those old icons were a single image map, and the whole thing was custom HTML and CSS, and a weird mix of a plugin called “magic fields.”

We do like most of the overall look of the previous site, but I love Epik and am rebuilding the entire thing from scratch on your theme.

So everything I’m doing is “hacking” to kind of get it close. I had tried a few approaches (like adding the icons to the header area with simple hooks) but nothing seemed to be real close. Putting it in the secondary nav and styling it with icons was about as close as I was able to get without ripping everything apart.

If there’s a way to move it down a bit, even if I can’t get it perfectly where it was, I think I’d call it a day.

Any thoughts you have welcome, and thank you again. I’m a huge fan of your theme, and use it on two other sites (and that’s why I’m slogging my way through redoing our main company site on your framework — just love Epik!)

Best,
Biagio
September 1, 2015 at 9:33 pm #16350
Wes
Moderator
There’s a couple ways to do it. One way is to add this code to your CSS –
```
#menu-social-media {
    position: relative;
    top: 40px;
}
```
The other way is to add the code that creates those images/links and place it inside of a Header Right Widget area right on top of the Menu widget that you’re using. If you did want to do that, here is the source code –
```
<ul id="menu-social-media" class="menu genesis-nav-menu menu-secondary"><li id="menu-item-482" class="menu-facebook menu-item menu-item-type-custom menu-item-object-custom menu-item-482"><a target="_blank" href="http://facebook.com/jokeandbiagio">facebook</a></li>
<li id="menu-item-481" class="menu-twitter menu-item menu-item-type-custom menu-item-object-custom menu-item-481"><a target="_blank" href="http://twitter.com/jokeandbiagio">twitter</a></li>
</ul>
```
You could add that in a Text widget. But you’d need to adjust the margin/padding in some places for the widget locations.
September 4, 2015 at 1:37 am #16356
JokeAndBiagio
Customer
Thanks, that worked great!
September 5, 2015 at 10:46 pm #16364
Wes
Moderator
You’re Welcome!
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Trouble with Header Right…’ is closed to new replies.