Navigation
Archive / Custom Header Add In (Page 2)
This is archived content. Visit our new forum.

Tagged: 

1 2 3
  • Author
    Posts
  • February 27, 2017 at 3:35 pm #1387870
    Nabeel A
    Moderator

    Hi again,

    First replace your PHP code with 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 align="right"><div class="x-headtext"><a class="logobar-link" a href="http://@">Home</a><a href="http://@"></a> |  <a href="http://@">Blog</a> | <a href="http://@">Register Today</a> | <a href="http://@">Account Login</a><br><a class=".x-headtext" href="a href="tel:+1-800-555-5555" target="_top">We Personally Answer Every Call 800-232-6927</a></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; ?>

    Then add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

    .x-headtext {
    float: right !important;
    margin-top: 75px;
}
.masthead-stacked .x-brand {
    float: left !important;
}

@media screen and (max-width: 1112px){
.x-headtext {
    margin-top: 0;
}
}

    Let us know how this goes!

    February 28, 2017 at 6:12 am #1388642
    clmurray1969
    Participant

    That looks great!! One more question. Is there a way to add a search box underneath that text aligned the same way?

    http://southjerseypaper.net/

    February 28, 2017 at 3:07 pm #1389264
    Friech
    Moderator

    Hi There,

    Just update the given code a little bit to 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 align="right">
        <div class="x-headtext"><a class="logobar-link" a href="http://@">Home</a><a href="http://@"></a> |  <a href="http://@">Blog</a> | <a href="http://@">Register Today</a> | <a href="http://@">Account Login</a><br><a class=".x-headtext" href="a href="tel:+1-800-555-5555" target="_top">We Personally Answer Every Call 800-232-6927</a>
        <?php echo do_shortcode( '[x_search class="header-searchbar"]' ); ?>
        </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; ?>

    Hope it helps, Cheers!

    March 1, 2017 at 7:14 am #1390220
    clmurray1969
    Participant

    Great! Two things. Its not letting me line up even with the bottom of the logo. I tried changing the css and where its sitting was as far as i can go without the logo moving up as well.

    The other thing…not sure if its possible. This sites links will actually link to a catalog site. Would it be possible to have the search box open up in a different window…and actually search the catalog site, not this site?

    http://www.southjerseypaper.net

    The catalog site that it will connect to is…
    http://www.southjerseypaper.com

    March 1, 2017 at 1:38 pm #1390788
    Friech
    Moderator

    Hi There,

    Please add this on your custom CSS on Customizer.

    .header-searchbar {
	margin-bottom: 0;
    margin-top: 1.5em;
}

    Regretfully searching one site and have a result of the other will require a custom development. This would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

    Thanks for understanding.

    March 1, 2017 at 1:44 pm #1390793
    clmurray1969
    Participant

    I added this into my Customizer…no change.

    And thank you for the search bar info. Ill look into it.

    March 1, 2017 at 2:16 pm #1390837
    clmurray1969
    Participant

    Thanks!! I actually messed around with the css in the customizer, and there was a piece in there that was conflicting i believe. Anyway…the search box is where i want it…but the text is a little high. Im attaching the custom CSS that is currently in my customizer doing a couple of other things…can you see what i need to adjust or change to get the text links to come down on the search box? Thanks again…you guys are awesome!

    .x-navbar{
 background: linear-gradient(to bottom, #0E2F84 0%, #051B5A 100%) repeat scroll 0% 0% transparent;
}
.x-logobar {text-align: left; background: linear-gradient(to bottom, #B10012 20%, #B10012 100%) repeat scroll 0% 0% transparent;
}
.x-headtext {
    float: right !important;
    margin-top: 28px;
}
.masthead-stacked .x-brand {
    float: left !important;
}
.header-searchbar {
	margin-bottom: 0;
    margin-top: 1.5em;
}
.blog .x-header-landmark {
display: none;
}
    March 1, 2017 at 9:29 pm #1391345
    Rue Nel
    Moderator

    Hello There,

    Thanks for updating in! Please have your custom css code updated and make use of this code:

    .x-navbar{
 background: linear-gradient(to bottom, #0E2F84 0%, #051B5A 100%) repeat scroll 0% 0% transparent;
}
.x-logobar {text-align: left; background: linear-gradient(to bottom, #B10012 20%, #B10012 100%) repeat scroll 0% 0% transparent;
}
.x-headtext {
    float: right !important;
    margin-top: 35px;
}
.masthead-stacked .x-brand {
    float: left !important;
}
.header-searchbar {
    margin-bottom: 0;
    margin-top: 15px;
}
.blog .x-header-landmark {
  display: none;
}

    Please let us know if this works out for you.

    March 2, 2017 at 6:12 am #1391722
    clmurray1969
    Participant

    Thanks. I put the updated file in and it brought the text down a few pixels…but not quite enough. I played with the numbers a bit, but couldn’t get the text to move anymore without moving the logo or the search box.

    March 2, 2017 at 8:04 am #1391827
    Paul R
    Moderator

    Hi,

    Can you provide us a screenshot and indicate what needs re-positioning.

    Thanks

    March 2, 2017 at 11:20 am #1392107
    clmurray1969
    Participant

    Hi guys…again appreciate the help. I just wanted to make sure of the final layout with my customer before asking for more help. Ill respond as soon as i know. Thanks!

    March 2, 2017 at 1:29 pm #1392278
    Jade
    Moderator

    Feel free to let us know if you need further help.

    Cheers!

    March 6, 2017 at 11:26 am #1396516
    clmurray1969
    Participant

    Hi guys…i think im at a point to ask for some help…lol…the text links in the header…how can i separate them with css to change the color? I want them white…but the links can’t be white in the body. Here is my current css

    .x-navbar{
 background: linear-gradient(to bottom, #0E2F84 0%, #051B5A 100%) repeat scroll 0% 0% transparent;
}
.x-logobar {text-align: left; background: linear-gradient(to bottom, #B10012 20%, #B10012 100%) repeat scroll 0% 0% transparent;
}
.x-headtext {
    float: right !important;
    margin-top: 25px;
}
.masthead-stacked .x-brand {
    float: left !important;
}
.header-searchbar {
    margin-bottom: 1;
    margin-top: 9px;
}
.blog .x-header-landmark {
  display: none;
}
.x-accordion-heading .x-accordion-toggle {
	color: #FFFFFF;
	font-size: 18px;
	padding: 5px 0;
}
.x-accordion-heading .x-accordion-toggle.collapsed {
     background-color: #336699 !important;
}
.x-accordion-heading .x-accordion-toggle {
     background-color: #336699 !important;
}
    March 6, 2017 at 11:59 am #1396562
    Joao
    Moderator

    Hi There,

    Please add 

    div.x-headtext a {
color: white;
}
div.x-headtext a:hover {
color: blue;
}

    Hope it helps
    Joao

    March 6, 2017 at 12:08 pm #1396568
    clmurray1969
    Participant

    Thanks alot…perfect! You guys are awesome.

  • Author
    Posts
1 2 3
  • <script> jQuery(function($){ $("#no-reply-1384530 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>