Docs

[codexworks]

Hi I would like to ask how can I incorporate the attached sample image to the website that I am creating?

Accueil

I want the logo to be at the middle of the top bar and navbar and I want it to be seen while i browse the page down. Fixed Top.

Thanks

[codexworks]

This reply has been marked as private.

[Christopher]

Hi there,

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Please copy _navbar.php from framework/views/global and put it in the same path inside child theme, replace existing code with following :

<?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>
      </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 echo do_shortcode('[add shortcode here]'); ?>
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

Add language switcher shortcode instead of add shortcode here in provided code.

Hope it helps.

[codexworks]

This reply has been marked as private.

[Rupok]

Great. Let us know how it goes.

[codexworks]

This reply has been marked as private.

[codexworks]

This reply has been marked as private.

[Rad]

Hi there,

Hmm, these are quite hard to achieve due to structures limiting it. Would it be okay to provide mockup screenshot design of the final look? Example, I can align it to right through absolute positioning, but I’m not sure if the right most screen or rightmost container, or right most of the menu. With mockup, we can lessen the frequent changes through back and forth procedures.

Please include the mockup design including the resized view.

Thanks!

[codexworks]

This reply has been marked as private.

[codexworks]

This reply has been marked as private.

[Lely]

Hi There,

Thank you for the screenshot.

1.) To align the menu on the right, please add the following CSS on Appearance > Customize > Custom > Edit Global CSS:

.masthead-inline .desktop .x-nav {
    position: absolute;
    right: 0;
}
.x-navbar .desktop .x-nav > li:last-child > a {
    padding-right: 0 !important;
}

2.) Font is currently responsive. See this:http://screencast-o-matic.com/watch/cD6ffkjupo

3.) For hamburger menu to stay on the right and hide the language selector, please also add this:

@media (max-width: 979px){
.masthead-inline .x-btn-navbar {
   position: absolute;
    right: 0;
    margin-right: 6px !important;
}
#lang_sel_list {
      display: none; 
}
.x-brand img { /*See #5*/
    margin-bottom: 16px !important;
}
}

4.) Can you clarify which space is too much? When I check again, the height of the menu bar is now the same height of your logo. Please clarify.

5.) That CSS will add bottom margin to the logo on mobile. Adjust the bottom margin accordingly to the space you preferred. Regarding the language selector to be at the middile, this one confuses me because I thought you want it to be hidden from request #3?

6.) Submenu fonts. Update this custom CSS:

@media screen and (max-width: 1045px){
.x-navbar .x-nav > li > a{
    font-size: 10px !important;
}
}

To this:

@media screen and (max-width: 1045px){
.x-navbar .x-nav > li > a, .x-navbar .x-nav > li >ul>li>a {
    font-size: 10px !important;
}
}

Hope this helps.

[codexworks]

This reply has been marked as private.

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

.x-navbar {
    border: none;
    box-shadow: none;     background-color: transparent; 
}
.x-navbar .desktop .x-nav > li > a, 
.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    -moz-box-shadow:   none;
    -webkit-box-shadow: none;
    box-shadow:         none;
       color: white;
}
.x-navbar-scrolled .desktop .x-nav > li > a > span {
    color: #272727;
}

.x-navbar-scrolled .desktop .x-nav > li > a > span:hover {
    color: red;
}
.x-navbar-fixed-top-active .x-navbar-wrap {
  margin-bottom: 0;
}
@media (min-width: 980px) {
	.x-slider-container.below {
		margin-top: -75px;
	} 
}

And Please add the following code to Appereance > Customizer > Custom > Javascript

jQuery(document).ready(function($){
  $('.home .x-navbar-fixed-top').css("background-color", "transparent");
  $(window).scroll(function(){
   if ($(this).scrollTop() > 400) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.99)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 300) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.75)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 200) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.5)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 100) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.35)").css("transition","0.3s ease-in-out ");
   } else {
    $('.home .x-navbar-fixed-top').css("background-color", "transparent").css("transition","0.3s ease-in-out ");
   }
    
   if ($(this).scrollTop() > 100) {
     $('.home .x-navbar-fixed-top').addClass('x-navbar-scrolled');
   } else {
     $('.home .x-navbar-fixed-top').removeClass('x-navbar-scrolled');
   }
    
  });
});

Hope it helps

Joao

[codexworks]

This reply has been marked as private.

[Lely]

Hi There,

1.) We can add this line:
$('.x-navbar-fixed-top').css("background-color", "transparent").css("color","#151e3f");
3.) We can remove .home so the jquery will work on other pages too.
4.) We can add this line: $('.x-navbar .sub-menu').css("background-color", "transparent");
Updated code will be like this:

jQuery(document).ready(function($){
  $('.x-navbar-fixed-top').css("background-color", "transparent");
  $('.x-navbar .sub-menu').css("background-color", "transparent");
  
  $(window).scroll(function(){
   if ($(this).scrollTop() > 400) {
    $('.x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.99)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 300) {
    $('.x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.75)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 200) {
    $('.x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.5)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 100) {
    $('.x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.35)").css("transition","0.3s ease-in-out ");
   } else {
    $('.x-navbar-fixed-top').css("background-color", "transparent").css("transition","0.3s ease-in-out ");
	 $('.x-navbar .sub-menu').css("background-color", "transparent");
}
    
   if ($(this).scrollTop() > 100) {
     $('.x-navbar-fixed-top').addClass('x-navbar-scrolled');
   } else {
     $('.x-navbar-fixed-top').removeClass('x-navbar-scrolled');
     $('.x-navbar-fixed-top').css("color","#151e3f");
  }
    
  });
});

2.) This will only work on desktop or on screensize greater than 980px. By default, menu is not fixed on mobile.

Remove line on language selector. Add this custom css:

#lang_sel_list ul {
    border-top: none !important;
}

Hope this helps.

[Author]

Posts