-
Posts
-
My URL is here: http://www.startdesignfashion.com/
My question is this: I added PHP to add social buttons to the top of the top of the “stacked” navbar. I can position the social buttons, but they are not responsive. In short, the CSS is a mess.
Below is the code:
<?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; ?>
/* Custom Social */
.custom-social {
margin-top: -116px !important;
display: block;
position: absolute;
}
.custom-social .x-social-global a {
font-size: 22px;
text-decoration: none;
margin-left: 1px;
}Hello There,
Thanks for writing in! Please edit your code and place the social icons after the logo:
<?php x_get_view( 'global', '_brand' ); ?> <div class="custom-social"><?php x_social_global(); ?></div>Please let us know how it goes.
- <script> jQuery(function($){ $("#no-reply-1226683 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>
