Docs

[motionair]

Hi, im trying to add a custom menu to my website.

This is the HTML code. I added it to the _navbar.php and it shows at the top of my website as expected but it appears under the field where the x-menu usually is. So over my menu it shows “assign a menu” and that is where i want my menu to be (so that i can control wether it is static or fixed as usual in the customizer.

Help greatly appreciated.

<div class="nav-wrap">   
  <ul class="group" id="fancy-nav">
      <li><a rel="#038680" href="#">ABOUT</a></li>
      <li><a rel="#038680" href="#">SERVICES</a></li>
      <li class="current_page_item_two"><a rel="#038680" href="#">HOME</a></li>
      <li><a rel="#038680" href="#">MEDIA FEED</a></li>
      <li><a rel="#038680" href="#">CONTACT</a></li>
  </ul> 
</div>

-Reiel

[motionair]

This reply has been marked as private.

[Darshana]

Hi there,

Thanks for writing in! The correct file to edit would be _nav-primary.php. Then locate the following code fragment which is capable of displaying the desktop menu.

<nav class="x-nav-wrap desktop" role="navigation">
  <?php x_output_primary_navigation(); ?>
</nav>

Make sure to setup a child theme (https://community.theme.co/kb/how-to-setup-child-themes/) before making any template changes.

Thanks!

[motionair]

Thank you, now it is in the right place!

now i have some new problems..

1# The navbar seems to cover the breadcrumbs for some reason, is there a way to fix that?

2# Also, i´m in need of changing color of the menu item that is active. i tried the code beneath with no luck, i´m guessing its because i am not using the standard menu. how can i make that work?

.x-navbar .x-nav > .current-menu-item > a {
  color: orange !important;
}

Thanks a bunch!

[motionair]

Im also wondering if it is possible to create tabs that can have sections inside them?

[Rupok]

Hi there,

Thanks for updating.

#1. It’s because you have added the following CSS :

body.x-navbar-fixed-top-active .x-navbar-wrap {
  height: 40px;
}

Kindly remove them to get expected result.

#2. Unfortunately there is no associated class for you custom menu as it’s not standard menu.

#3. Not sure where you are trying to create tabs with section. Would you please clarify a bit?

Cheers!

[motionair]

Thanks for noticing my error Staff 🙂

2# Ok, that is what im afraid of.. is there a way to implement my menu thru x so it works? or do i have to add my own code? (can you point me in the right direction?)

3# what im looking for is a way to have “two” pages next to eachother and be able to swich from one to the next with a button.. this seemed very custom, so i wanted to try tabs in stead. The problem is i can only write html and shortcodes inside the tab. Is it possible to use sections and cornerstone elements nested inside a tab in any way?

Thanks again,
Reiel

[Rupok]

Hi Reiel,

Thanks for updating.

#2. You can follow this thread to get idea : https://community.theme.co/forums/topic/adding-menu-below-header/

#3. As you can use HTML and shortcodes, so technically you can place anything inside that. Let’s find the appropriate shortcodes and use this : http://theme.co/x/demo/integrity/1/shortcodes/accordion/

[content_band] is identical to x-section. So you can use this as section. Almost everything covers in the shortcodes if you can utilize them.

Cheers!

[motionair]

Thanks for the links, that helped a lot!

Now i got the tabs to work as i wanted. I do have some questions about that part still.. I would like to change the text size of the tab headline, maybe also some difrent backgrounds. i have been trying difrent selectors with no luck, <h2> tags doesent get saved. Any ideas?

About the Menu, the link you provided is for menus under the header.. But im using _nav-primary.php in stead.. my plan was to use “current_page_item_two” class as a placeholder for “.current-menu-item” but none of them work and i have a hard time finding examples that do…

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================

?>

<a href="#" class="x-btn-navbar collapsed" data-toggle="collapse" data-target=".x-nav-wrap.mobile">
  <i class="x-icon-bars" data-x-icon=""></i>
  <span class="visually-hidden"><?php _e( 'Navigation', '__x__' ); ?></span>
</a>

<nav class="x-nav-wrap desktop" role="navigation">
  <div class="nav-wrap">   
    <ul class="group" id="fancy-nav">
      <li><a rel="#038680" href="http://temp.motionair.no/?page_id=163">Services</a></li>
      <li><a rel="#038680" href="http://temp.motionair.no/?page_id=10">About</a></li>
      <li class="current_page_item_two"><a rel="#038680" href="http://temp.motionair.no/">Motion Air</a></li>
      <li><a rel="#038680" href="http://temp.motionair.no/?page_id=344">Media Feed</a></li>
      <li><a rel="#038680" href="http://temp.motionair.no/?page_id=12">Contact</a></li>
    </ul> 
  </div>
</nav>

<div class="x-nav-wrap mobile collapse">
  <?php x_output_primary_navigation(); ?>
</div>

Thanks again for great service and help!

[Rad]

Hi there,

I guess you’re referring to Services tab, in yes, you can add this CSS with your own preferred styling. Though, I’m not sure about <h2>, I may be looking on different tabs. Would you mind providing more information? And tab doesn’t have <h2> by default, you can be referring to the inner content or relative content.

.x-nav-tabs>.active>a, .x-nav-tabs>.active>a:hover {
    color: #566471;
    background-color: #fff;
    cursor: default;
}

About your second issue, I’m not sure if I understanding correctly. What’s the use of current_page_item_two as a placeholder of current_page_item? Should it have special feature? If you just wish to set that menu item as active, you can just directly use current_page_item or x-active.

Thanks 🙂

[motionair]

Hi, i was referring to the cornerstone element “tabs”. The text size of the tab haedlines are too small. I cant figure out how to change them. The following is the selector chrome inspector gives me but it is wrong, how can i change that text size?

#x-section-3 > div > div > div > ul > li:nth-child(2) > a {
size: 50px;
color: orange;
}

Thanks, i figured out the current_page_item 🙂

[Rue Nel]

Hello There,

Please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.x-nav-tabs.top>li a {
    font-size: 18px;
    color: orange;
}

Please let us know if this works out for you.

[motionair]

Thanks thats perfect. Still have some problems finding the selectors (in general i mean) is there a easy way to find them for sure without posting?

Thanks!

[Christopher]

Hi there,

You can inspect elements and selectors using ‘chrome developer tools’.

Please check this link as well :

https://community.theme.co/kb/css-class-index/

Hope it helps.

[Author]

Posts