Menu bar drop down & Social Icon

Hi, I’m new to wordpress and travelify. I just read all the Q&A here and solved some problems. Great support! Here are some issues I couldn’t find…

  1. I moved menu bar to the center, add the cord below to the style.css in my child theme.

#main-nav ul li:first-child {
margin-left: 300px;
}

Then the drop down doesn’t work right. It’s all over and don’t know how to fix it.

  1. How to add another social icon above header? I added three of them but want to add custom one.

My site is… http://styleimported.net/

Thank you so much!

  1. Instead of above mentioned code you might want to use something like this:
#menu-item-13 {
    margin-left: 300px;
}
  1. It is easy to add these icons since they are already integrated in the theme and you only need to add an extra one. If you are looking for other icon to be added there then you will have a hard time to get it done. Maybe some plugin could help with shortcodes or something but otherwise it might get really complicated.

Thank you so much for your reply!

  1. It works good now!
  2. Yes, I can choose the icon from the site you gave me. However, I can’t find how to add another icon and put next to the other social icons already there. Would you tell me how?

Thanks!

Sorry to bother you again. About social icons.

I’d like to change hoover color. instead of showing square color around it, I want to change the icon color it self. Instead of showing square color of red or blue (whatever the colors), I simply want to show grey icons (no square around it).
Hope you understand what I’m trying to say…

Thank you!

Btw, which icon is it? Maybe it is worth adding it to theme via next theme update.

It is a bit tricky ti implement if you have no idea about coding at at all.

  1. The first thing is to register a new text field in Theme Options by editing

$social_links = array in theme-options.php file. You will see how other icons are created there.

  1. Next step is to set default value for Theme Options in themeoptions-defaults.php again you will see how it is done for other icons.

  2. Now you will have to call for newly created icon in header-extensions.php. More specifically look into travelify_headerdetails function.

  3. Now add proper styling to this icon and use its ID for content. ID can be found in Genericons website under CSS option.
    It will look something like this

.social-icons ul li.facebook a:before {
	content: '\f204';
}
.social-icons ul li.facebook a:hover {
	background: #3B5998;
}

To change icon color on hover you can replace background: with color: on hover but you will also have to get rid of

.social-icons ul li a:hover {
	color: #fff !important;
}

Since it overrides all hover colors and makes it white instead.

Thank you so much for your reply. I really appreciate all the details!
However, because I’m so new… I have to look into how to register a new text field in Theme Option.

  • I found all the social icon code in Travelify style.css (not a in Child), but I think I should not change it directly there.

So first, I’m trying to change hoover color, but also not sure how (where) to get rid of below…

.social-icons ul li a:hover {
color: #fff !important;
}

I found them in Travelify style.css, but again I think I should not change directly in Travelify style.css

I apologize all the beginner questions…

  • Yes, I think it’d be great if you add new social icon for Bloglovin (with #heart icon).

No, Bloglovin is definitely not going to become part of this theme. Maybe heart icon could become a part as a random icon, so it could be used for anything.

Adding a single icon via Child Theme might be incredibly difficult as you have to recreate all those functions. It is definitely not worth it.

One alternative would be to replace already existing icon using CSS. It would be still titled as Facebook, Twitter or anything else but the icon would be displayed as Blogvin.

For instance here is code that will replace RSS with heart icon.

.social-icons ul li.rss a:before {
	content: '\f461';
}

To change icon color on hover you can use this code via Child Theme style.css

.social-icons ul li.facebook a:hover {
	color: #3B5998 !important;
	background: transparent;
}
.social-icons ul li.twitter a:hover {
	color: #00aced !important;
	background: transparent;
}
.social-icons ul li.google-plus a:hover {
	color: #cd4132 !important;
	background: transparent;
}
.social-icons ul li.pinterest a:hover {
	color: #cb2027 !important;
	background: transparent;
}
.social-icons ul li.linkedin a:hover {
	color: #005a87 !important;
	background: transparent;
}
.social-icons ul li.tumblr a:hover {
	color: #2b4761 !important;
	background: transparent;
}
.social-icons ul li.vimeo a:hover {
	color: #1bb7ea !important;
	background: transparent;
}
.social-icons ul li.instagram a:hover {
	color: #517fa4 !important;
	background: transparent;
}
.social-icons ul li.flickr a:hover {
	color: #0063db !important;
	background: transparent;
}
.social-icons ul li.youtube a:hover {
	color: #cd4132 !important;
	background: transparent;
}
.social-icons ul li.rss a:hover {
	color: #fc7216 !important;
	background: transparent;
} 

It worked!
(*Oh having a random icon would be a great idea)
Thank you so so much for your great support!