Social icons in header - Help

Support
#1

Can someone please assist me in getting my social icons to show in the header of my site? I don’t want them in the top bar, i’d like them to be lined up along the top right line of my header. I have the X-child theme installed, and i’m prepared to create some template files for this. Right now, they’re in the top bar but for some reason they’re white and only show when I roll over them… I’d like the icons to always be visible in their default icon style, and change/highlight once rolled over. I tried following a few threads here for similar support, but these tend to be specific to someones code/theme.

I’m running X-Child with renew
https://feelgoodgraphics.com/

#2

Hi There,

Please navigate to your child theme’s /framework/legacy/cranium/headers/views/global directory create a file named _brand.php and paste the code below:

<?php

// =============================================================================
// VIEWS/GLOBAL/_BRAND.PHP
// -----------------------------------------------------------------------------
// Outputs the brand.
// =============================================================================

$option_logo_text = x_get_option( 'x_logo_text' );
$option_logo_src  = x_get_option( 'x_logo' );
$logo_text        = ( empty( $option_logo_text ) ) ? get_bloginfo( 'name' ) : $option_logo_text;

if ( empty( $option_logo_src ) ) {
  $logo_output = $logo_text;
} else {
  $logo_src    = x_make_protocol_relative( $option_logo_src );
  $logo_output = '<img src="' . $logo_src . '" alt="' . $logo_text . '">';
}

if ( x_get_option( 'x_logo_visually_hidden_h1' ) ) {
  echo '<h1 class="visually-hidden">' . $logo_text . '</h1>';
}

?>

<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>">
  <?php echo $logo_output; ?>
</a>

<div class="right">
	<?php x_social_global(); ?>
</div>

After that adding this custom CSS under Theme Options > CSS:


.x-navbar .x-social-global a {
    color: rgb(4,140,147);
    font-size: 35px;
    margin-left: 10px;
}
.x-navbar .x-social-global a:hover {
    color: #f00;
}

Then you can disable the topbar content.

Hope that helps and thank you for understanding.

#3

That worked great! The only issue i’m seeing is when I hover over the social icons, it’s showing a red circle? How can I get this to highlight the actual color for the icon? IE, Pinterest Red, FB and IG blue?

#4

Hello Sean,

It is showing as red because you have added this custom css:

.x-navbar .x-social-global a:hover{
  color:#f00;
}

Please remove that code and then update the other code into this:

.x-navbar .x-social-global a {
    font-size: 20px;
    margin: 10px 5px;
    padding: 10px;
    background-color: #bbb;
}

Hope this helps.

#5

This worked great, but created a problem. For some reason now my Nav bar has lost the custom CSS styling I had added. Mostly, from what I can see, my Nav menu is transparent. I still have the code in my CSS customizer but it’s not working… any suggestions?

.woocommerce .price > .amount, .woocommerce .price > ins > .amount, .woocommerce li.product .entry-header h3 a:hover, .woocommerce .star-rating:before, .woocommerce .star-rating span:before {
color: #1abc9c;
}

.vc_row {
margin-right: auto;
margin-left: auto;
}

nav.woocommerce-breadcrumb {
margin-right: auto;
margin-left: auto;
}

.format-standard .entry-title::before {
content: “”;
}

.x-pagination ul {
display: inline-block;
margin: 0;
padding: 6px;
background-color: #7BBEE4;
border-radius: 100em;
}

.x-pagination span.current, .x-portfolio-filters-menu, .widget_tag_cloud .tagcloud a, .h-feature-headline span i, .widget_price_filter .ui-slider .ui-slider-handle {
background-color: #6290A5;
}

.x-navbar .x-nav > li.x-menu-item-woocommerce > a .x-cart > span.outer {
color: #ffffff;
background-color: #7BBEE4;
}

.x-navbar .x-nav > li.x-menu-item-woocommerce > a:hover .x-cart > span.outer {
color: #ffffff;
background-color: #7BBEE4;
}

.x-navbar .x-nav > li.x-menu-item-woocommerce > a:hover .x-cart > span.outer {
color: #ffffff;
background-color: #140F28;
}

.x-navbar .x-nav > li.x-menu-item-woocommerce > a .x-cart {
color: #7BBEE4;
background-color: #ffffff;
}

.x-navbar .x-nav > li.x-menu-item-woocommerce > a:hover .x-cart {
color: #140F28;
background-color: #ffffff;
}

mark {
background-color: white;
color: black;
}

h2.woocommerce-loop-category__title {
background-color: white;
color: black;
margin-top: 25px;
font-size: 265.7%;
}

.x-container.max {
margin-right: auto;
margin-left: auto;
max-width: 1200px;
}

.flex-control-nav.flex-control-thumbs {
top: auto;
}

.woocommerce div.product .images {
overflow: visible;
}

.page .x-header-landmark {
display:none;
}

.archive header.x-header-landmark { /* This will work on both tag and category page*/
display: none;
}
.tag header.x-header-landmark { /* This will work on specific to tag page*/
display: none;
}
.category header.x-header-landmark { /* This will work on specific to category page*/
display: none;
}

.x-navbar .x-social-global a {
font-size: 20px;
margin: 10px 5px;
padding: 10px;
background-color: #bbb;
}

.x-navbar .x-social-global a {
color: rgb(4,140,147);
font-size: 35px;
margin-left: 10px;
}

.x-social-global a.facebook {
background-color: white;
color: #3b5998;
}

.x-social-global a:hover.facebook {
background-color: #3b5998;
color: white;
}

.x-social-global a.instagram {
background-color: white;
color: #3b5998;
}

.x-social-global a:hover.instagram {
background-color: #3b5998;
color: white;
}

.x-social-global a.pinterest {
background-color: white;
color: red;
}

.x-social-global a:hover.pinterest {
background-color: red;
color: white;
}

#6

Hello Sean,

There is no particular block in the given css code above that changes the color or backkground color of the navbar. You can change it by the way when you go to X > Theme Options > {your stack} and use the color picker for you navbar.

Hope this helps.

#7

I think when I created the new template for the Nav, it added a .desktop that was’t there before… I can’t seem to nail down the specific CSS that now controls the menu background color.

#8

Hello Sean,

There is actually two set of menus in the header. One is for desktop and the other is for the mobile menu.

Hope this helps.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.