Add Social Icons and Click To Phone Number To Right Of Menu - Support

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

Author

Posts
March 5, 2014 at 7:03 am #232547
cbcolvard
Participant
Hi:

I read so much that I really can’t seem to get this to work. Using fixed header with additional nav. setting.

I would rather not hard code the phone number is the client plans to change it .

Is it possible to put the header mods in the child theme so any upgrades to overwrite the header file?

I would like to have the social icons and phone number on the same line as the logo and menu. I need the phone number to be click to call for iphone and android which seemed to work when it was on the top line.

This mod still needs to look good on mobile devices as well.

Also, I would like to be able to adjust css as required to tweek.

If possible I would also like to figure out how to make the menu text have a hover in the red color as well haven’t figured that out either.

http://houstonsecuritygates.com

Thank you for your help.

Chris
- This topic was modified 11 years, 4 months ago by cbcolvard.
March 5, 2014 at 10:41 am #232652
Ismael
Moderator
Hey cbcolvard!

Thank you for using the theme. I hope you’re doing great.

You can add something like this on Enfold > Header > Phone Number or small info text field:
```
<a href=”tel:123456789″>123456789</a>
```
Please add a social icon so that we can inspect it on mobile view.

Regards,
Ismael
March 5, 2014 at 12:01 pm #232668

cbcolvard
Participant

Hi:

Just don’t know where to post them in the header?

Chris

March 5, 2014 at 9:04 pm #232920

Yigit
Keymaster

Hey!

As Ismael mentioned, you should add it in Enfold theme options http://i.imgur.com/ZP57LLG.jpg

Best regards,
Yigit

March 5, 2014 at 9:09 pm #232924

cbcolvard
Participant

Hi:

I have done that for the phone number and the social icons. Still can get them on the right side though.

Thanks

Chris

March 5, 2014 at 9:15 pm #232926

Yigit
Keymaster

Hey!

Please choose to display a header type with social icons

Regards,
Yigit

March 5, 2014 at 9:20 pm #232928

cbcolvard
Participant

Hi:

OK that’s done. Have this in quick css:

#top .main_menu {
right: 132px;
border-right-style: dashed;
border-right-width: 1px;
padding-right: 25px;
}

#header_main .social_bookmarks {
position: absolute;
top: 50%;
margin-top: -15px;
right: 0;
}
.social_header .phone-info {
float: right; padding-top: 40px; }

/*HR Colors*/
.hr span {
border-color: #BCBCBC;
}

Top bar is still showing with social on top.

Thanks

March 5, 2014 at 9:26 pm #232932
Yigit
Keymaster
Hi!

Please add following code to Quick CSS as well
```
#top .social_bookmarks { padding-top: 30px; float: right; }
#header_meta { margin-top: -30px; }
.fixed_header.social_header #main { padding-top: 117px; }
```
You can adjust the value in first line to change the height of social icons.

Regards,
Yigit
March 5, 2014 at 9:58 pm #232964

cbcolvard
Participant

Hi:

I suspect it has something to do with my child custom css here:

/*
Theme Name: Enfold Child
Description: A Child Theme for the Enfold WordPress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://kriesi.at
Template: enfold
*/

/* CBC CSS Changes */

/* Center Title of Portfolio Item */

.main_color .grid-entry-title {text-align:center;}

.main_color .iconbox_icon, .main_color .iconbox_top_icon {
background-color: #a81010 !important;
color: #ffffff !important;
border-color: #a81010 !important;
}

.iconbox_content_container {
font-size: 16px;
color: ;
}

.container_wrap.main_color.light_bg_color {
border: none !important;
}

.main_color .avia-icon-list .iconlist_icon {
background-color: #a81010;
}

.alternate_color .avia-icon-list .iconlist_icon {
background-color: #a81010;
}

li:hover .avia-menu-fx, .current-menu-item>a>.avia-menu-fx, li:hover .current_page_item>a>.avia-menu-fx {
opacity: 1;
visibility: hidden;
}

/* Progress Bars */

.avia-progress-bar div.progress .bar {
background-image: none;
}

/* Enfold Map Plugin */

#top #main #map.avia-section .template-page {
padding: 0;
}
#map .container {
width: 100%;
padding: 0;
margin: 0;
}
#avia_google_maps-3.widget {
padding-bottom: 0 !important;
}
.map {
width: 100%;
}
#map .avia-builder-widget-area {
margin-bottom: -30px !important;
}

/*default header: main logo and main menu height. increase max value if you want to use a bigger logo*/

#header{
background-color: white;
}

#header_main .container, .main_menu ul:first-child > li a{ height:134px; line-height: 134px; }

/* Menu Dropdown Width */

.main_menu .menu ul { width: 160px; }

#top .main_menu {
right: 132px;
border-right-style: dashed;
border-right-width: 1px;
padding-right: 25px;
}

#header_main .social_bookmarks {
position: absolute;
top: 50%;
margin-top: -15px;
right: 0;
}

.social_header .phone-info {
float: right;
padding-top: 40px;
}

.hr span {
border-color: #BCBCBC;
}

#top .social_bookmarks {
padding-top: 30px;
float: right;
}

#header_meta {
margin-top: -30px;
}

.fixed_header.social_header #main {
padding-top: 117px;
}

/*Add your own styles here:*/

I cleared all out of quick css. Take note of the logo size if that makes a difference.

The last social #4 twitter is the only one that shows up.

Thanks

Chris

March 6, 2014 at 5:30 am #233048
Ismael
Moderator
Hi!

How are you? I hope you’re doing well today.

Please add this at the very bottom of the child theme’s style.css:
```
#top .social_bookmarks {
position: relative;
top: 43px;
}

.sub_menu {
top: 47px;
}
```
Cheers!
Ismael
Author

Posts

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

You must be logged in to reply to this topic.