Docs

[charliesa]

I added social buttons to the right of the navbar like this:

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// —————————————————————————–
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

?>

<?php if ( ( $navbar_position == ‘static-top’ || $navbar_position == ‘fixed-top’ || $is_one_page_nav ) && $logo_nav_layout == ‘stacked’ ) : ?>

<div class=”x-logobar”>
<div class=”x-logobar-inner”>
<div class=”x-container max width”>
<?php x_get_view( ‘global’, ‘_brand’ ); ?>
</div>
</div>
</div>

<div class=”x-navbar-wrap”>
<div class=”<?php x_navbar_class(); ?>”>
<div class=”x-navbar-inner”>
<div class=”x-container max width”>
<?php x_get_view( ‘global’, ‘_nav’, ‘primary’ ); ?>
<div class=”custom-social”><?php x_social_global(); ?></div>
</div>
</div>
</div>
</div>

<?php else : ?>

<div class=”x-navbar-wrap”>
<div class=”<?php x_navbar_class(); ?>”>
<div class=”x-navbar-inner”>
<div class=”x-container max width”>
<?php x_get_view( ‘global’, ‘_brand’ ); ?>
<?php x_get_view( ‘global’, ‘_nav’, ‘primary’ ); ?>
<div class=”custom-social”><?php x_social_global(); ?></div>
</div>
</div>
</div>
</div>

<?php endif; ?>

The issue I have is I can’t make the color change when I hover over the buttons.

These are the social buttons to the right of the Uber menu Navbar.

[charliesa]

URL: http;charliesandner.com

[charliesa]

http://charliesandner.com

[Prasant Rai]

Hello There,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.custom-social .x-social-global a:hover {
    color: #ddd !important;
}

Please change color code as per your requirement.

Thanks.

[charliesa]

I suspect this would work fine, except I’m using Uber Menu here. This CSS does NOT work.

[Lely]

Hi There,

Please also update this:

.custom-social {
    display: block;
    position: absolute;
    right: 0;
    margin-top: -30px !important;
 }

To this:

.custom-social {
    display: block;
    position: absolute;
    right: 0;
    margin-top: -30px !important;
    z-index: 999;
}

The social buttons is covered by ubermenu container. Above change will make it forward and then the hover will work.

Hope this helps.

[charliesa]

Thank you (stack order…so I’m stupid). At any rate, thanks again.

Works perfectly.

[Lely]

You’re welcome Charlie!

Cheers!

[Author]

Posts