Docs

[patoonord]

Hi,

I’ve been trying to figure this our forever now, and can’t seem to find the appropriate files i need to edit to pull this off. Basically i would like my navigation below and the info in the screenshot attached, in the same way.

What would be the easiest method in doing so?

Thank-you

[Jade]

Hi there,

Try to override the file _navbar.php which you could find in /wp-content/themes/x-child/framework/views/global/

Hope this helps.

[patoonord]

Hey thanks! got it to work as i want, just need to make it more responsive now!

For those interested, qnb.io/claim

And raw code in _navbar.php for education purposes:

<?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">

<div class="container sd-logo-menu">
		<div class="sd-logo-menu-content">
			<div class="sd-logo">
									        <?php x_get_view( 'global', '_brand' ); ?>
							</div>
			<!-- sd-logo -->
			
												<div class="sd-header-extra">
													<div class="sd-header-extra-email clearfix">
								<i class="fa fa-envelope-o"></i>
								<span>
									<span>EMAIL US AT</span>
									<a href="mailto:[email protected]" title="Email Us">[email protected]</a>
								</span>
							</div>
							<!-- sd-header-extra-email -->
																			<div class="sd-header-extra-phone clearfix">
								<i class="fa fa-phone"></i>
								<span class="sd-header-extra-desc">
									<span>CALL US NOW</span>
									<span class="sd-header-ph-number">877 (254) 6435</span>
								</span>
							</div>
							<!-- sd-header-extra-phone -->
																			<a class="sd-extra-button" href="/index.php#wpcf7-f4-p5-o1" title="FREE QUOTE">FREE QUOTE</a>
											</div>
					<!-- sd-header-extra -->
							
			
		</div>
		<!-- sd-logo-menu-content -->
	</div>
      </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>
      </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>
      </div>
    </div>
  </div>

<?php endif; ?>

(you would need to style everything by adding to global CSS, i mostly just copied being lazy..)

CSS

.sd-logo-menu {
	height: 100px;
}
/* logo */
.sd-logo {
	float: left;
	padding: 0;
}
.sd-header-extra {
	color: #91a1b4;
	float: right;
	font: 700 13px/13px Montserrat, Tahoma, sans-serif;
	margin-top: 30px;
	text-transform: uppercase;
}
.sd-header-extra i {
	float: left;
	font-size: 30px;
	margin-right: 15px;
}
.sd-header-extra-email {
	float: left;
}
.sd-header-extra-email i {

}
.sd-header-extra-email > span {
	float: left;
	font-size: 11px;
	font-weight: 400;
}
.sd-header-extra-email a {
	color: #435061;
	font-size: 14px;
	font-weight: 700;	
}
.sd-header-extra-email a:hover {
	color: #29af8a;	
}
.sd-header-extra-email span span {
	display: block;
	margin-bottom: 8px;
}
.sd-header-extra-phone {
	border-left: 1px solid #dee0e9;
	float: left;
	margin-left: 20px;
	padding-left: 20px;
}
.sd-header-extra-desc {
	float: left;
	font-size: 11px;
	font-weight: 400;
}
.sd-header-ph-number {
	color: #435061;
	display: block;
	font-size: 14px;
	font-weight: 700;
	margin-top: 8px;
}
.sd-extra-button {
	border: 1px solid #29af8a;
	border-radius: 3px;
	color: #29af8a;
	display: inline-block;
	margin-left: 20px;
	padding: 15px 20px;
}
.sd-extra-button:hover {
	color: #435061;	
}

[Joao]

Hi There

Thanks a lot for your Input to the community

Joao

[Author]

Posts