[rhinotagoParticipant]

Hi there.

First of all, great product!

I’ve just started building a demo site and have a few queries regarding the topbar and navbar.

1. How can I increase the spacing between each icon in the topbar?

2. Can I add other icons to the topbar, such as a phone icon and mail icon and link them to phone number and email address respectively?

3. Can these icons be reordered?

4. Can I put the search icon in the topbar, then when the topbar disappears (from scrolling) make it appear on the far right side of the navbar?

5. Can I make the navbar and topbar transparent, then when start scrolling give it a background colour?

And lastly, are you able to have a look at my work in progress (http://www.onezero.co.nz/onezerov2/) and let me know how I can set up the navbar links so none of them show the active age?

Thanks in advance!

[Paul RModerator]

Hi,

Thanks for writing in!

1. You can add this under Custom > CSS in the Customizer.

.x-topbar .x-social-global a {
    margin-left: 10px;
}

Change 10px to achieve your desired spacing

2 & 3

Add the code from the attached social.txt to your child theme’s functions.php file

Then in the code change the phone and email(12345678 & admin@yoursite.com) from these lines of code

  $output .= '<a href="tel:12345678"><i class="x-icon-phone-square" data-x-icon=""></i></a>';
  $output .= '<a href="mailto:admin@yoursite.com"><i class="x-icon-envelope" data-x-icon=""></i></a>';

You can re-order the social icons by moving the lines of code
eg.

  if ( $facebook )    : $output .= '<a href="' . $facebook    . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon=""></i></a>'; endif;

      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon=""></i></a>'; endif;

That code outputs facebook and twitter

to reorder change it to

if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon=""></i></a>'; endif;

  if ( $facebook )    : $output .= '<a href="' . $facebook    . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon=""></i></a>'; endif;
      

4. This somehow contradicts no.5 where you want the topbar to be fixed with navbar.

5. Add this in custom > javascript in the customizer

jQuery(function($) {
 $(window).scroll(function(){ 
    if($('.x-navbar').hasClass('x-navbar-fixed-top')){
         $('.x-topbar').addClass('x-topbar-fixed-top');
    }else {
         $('.x-topbar').removeClass('x-topbar-fixed-top');
    }
});
});

Then add this in custom > css in the customizer

body .masthead {
    position: absolute;
    width: 100%;
}

body .x-navbar.x-navbar-fixed-top {
    background-color:#fff;
    top:46px;
    position:fixed;
    width:100%;
}

body .x-navbar.x-topbar-fixed-top {
    background-color:#fff;
    top:0;
    position:fixed;
    width:100%;
}

6. Replace the links in your menu items from this

http://www.onezero.co.nz/onezerov2/#x-section-1

to this

#x-section-1

Hope that helps.

[rhinotagoParticipant]

Thanks very much for your quick response!

Sorry for the confusion about point 4, but I’m not wanting the topbar to be fixed, just the navbar. With this in mind, can I put the search icon in the topbar, then when the topbar disappears (from scrolling) make it appear on the far right side of the navbar?

I have implemented all other changes, which work great, but I have another query about the active menu. I am wanting to have some navbar menus for the one page sections (e.g. ‘Our work’ and ‘Expertise’ sections) and have other navbar menus go to separate pages (e.g. ‘About’), but with your suggested menu links in place, if you go to the ‘About’ page then want to go back to the ‘Our work’ section, for example, those navbar menu links don’t work (only the ‘Home’ link works). Can you please suggest a fix?

Regarding the active menu settings, is it possible to only have the navbar menu text colour change to show the active section and not have the coloured line that appears above the menu name?

Also, can you please let me know how to remove the drop shadow from the navbar and the thin line that separates the topbar from the navbar?

So in summary:

4. Have search icon in topbar, then appear on the right of the navbar when the topbar disappears.

7. Fix links for one page / separate page menu items.

8. Active menu settings changed so only the menu name colour changes (no additional coloured bar above menu name).

9. Remove drop shadow from navbar and thin line separating topbar and navbar.

Thanks again, your assistance is greatly appreciated!

[Rue NelModerator]

Hello There,

Thanks for the updates!

4] Regretfully this isn’t a feature offered by X. It could be possible with custom development, but 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.

7] Please consider checking out the one page navigation from our knowledge base here: https://community.theme.co/kb/how-to-setup-one-page-navigation/

8] To remove the coloured bar above menu item, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.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 {
    box-shadow: none;
}

9] To temove drop shadow from navbar and thin line separating topbar and navbar, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-topbar,
.x-navbar {
    border: none;
    box-shadow: none;
}

Please let us know if this works out for you.

[rhinotagoParticipant]

Thanks for the help.

Regarding #7, I have reviewed the one page navigation from the knowledge base, but no success. When I try to go back to one of the one page sections from a separate page, the address bar keeps the separate page address (e.g. “…/about”) then adds the ID (e.g. “…/about/#our-work”).

[Rue NelModerator]

Hello There,

Thanks for the updates.

To resolve the issue with one page navigation from separate pages, please follow this topic: https://community.theme.co/forums/topic/page-links-using-ids/page/2/#post-98964

Hope this helps. Kindly let us know how it goes.

[rhinotagoParticipant]

Hi

I have copied and pasted the code into Custom > JavaScript and the One Page navigation under Page settings is set to X Demo menu but unfortunately it still doesn’t work.

[Rue NelModerator]

Hello There,

Can you please use this link format onezerov2/about/#our-work instead of onezerov2/about#our-work. If nothing else works, would you please provide us the url and access information of your site so we can take a closer look. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[rhinotagoParticipant]

This reply has been marked as private.

[LelyModerator]

Hello There,

Thanks for the admin credentials.
From checking your Our Work section is in homepage.
Please change your link from:
http://onezerov2/about/#our-work
To this:
http://www.onezero.co.nz/onezerov2/#our-work

If your Expertise section is in about page, link should be:
http://www.onezero.co.nz/onezerov2/about#expertise
See that after about there’s no more slash. I just added #expertise directly.

Please also note that your site only accessible with www

Hope this helps.

[Author]

Posts