Docs

[Migaro]

Okay, so the site I am building with X Theme is http://www.mywebsolutions.info/

I was trying to copy everything from my original site which is http://mywebsolution.ch/

It’s almost 90% the same on the homepage. The problem now is the navigation menu on the top of the header. I was able to do it when I turn on the Topbar (https://www.dropbox.com/s/y9vz1qdrcpsbo2p/themeco1.jpg)

The problem is,

#1 – The topbar menu created is too far from the header menu. There’s a huge space between them. How can I remove the space? I want the topbar Menu be near the header menu like here: http://mywebsolution.ch/

#2 – The logo moved lower. I want it to be vertically centered.

#3 – I don’t want the topbar links to be red. How can I change its color?

Actually, I created a Menu for this (https://www.dropbox.com/s/8art3kzaiu1pqsn/Menu.jpg)
As you can see, there is a sub-item. Another problem with the topbar links, the sub-item is not showing when I hover.

#4 – Is there a way that I can make the topbar menu just like the header menu?

#5 – I know there’s a border in the header menu but when I set the background to white, the navigation menu border disappeared. How to change its border color so that it will look like the one here http://mywebsolution.ch/ ?

THANKS in advance.

[Migaro]

I’m still not getting any answer. 🙁 Help, anyone?

[Rue Nel]

Hello Migaro,

Thanks for writing in! Just for future topics, self responding or bumping your post pushes it back in our Queue system so it takes longer to respond to.

#1] To remove the space, please find and update your css code in the customizer, Appearance > Customize > Custom > CSS

.site-links {
    width: 30%;
    float: right;
    margin: 0;
}

p:empty {
    display: none;
}

.x-topbar .x-social-global {
    float: left;
}

http://prntscr.com/avpdws

#2] The site links should be added within the container of the navbar and not in the topbar section. You may need to remove from the topbar. And when it is done, please insert this following code in your child theme’s functions.php file so that the site links will be located just above your main menu.

// Add custom link above the main menu
// =============================================================================
function add_custom_site_links(){ ?>
  
  <ul class="site-links">
   <li><a href="http://www.mywebsolutions.info/referenzen/">Referenzen</a></li>
   <li><a href="http://www.mywebsolutions.info/uber-uns/">Über uns</a></li>
   <li><a href="http://www.mywebsolutions.info/kontakt/">Kontakt</a></li>
   <li><a href="http://www.mywebsolutions.info/faq/">FAQ</a></li>
   <li><a href="http://www.mywebsolutions.info/blog/">Blog</a></li>
  </ul>

<?php }
add_action('x_before_view_global__nav-primary', 'add_custom_site_links');
// =============================================================================

#3] To change the color of the site links, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site-links li a {
    color: green;
}

.site-links li a:hover {
    color: blue;
}

#3a] For you sub menu items, could please post your code for this menu? I mean if you could post the contents of your template. Would you mind providing us the ftp login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation.

To do this, you can make a post with the following info:
– FTP Hostname
– FTP Username
– FTP Password

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

Thank you.

#4] You need to make your custom menu look like same as the main menu by having the same container classes and menu classes. And perhaps place your menu within the _nav_primary.php file. To do this, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?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" role="navigation">
  
  <!--  You need to place the menu here -->
  <ul class="site-links x-nav">
   <li><a href="http://www.mywebsolutions.info/referenzen/">Referenzen</a></li>
   <li><a href="http://www.mywebsolutions.info/uber-uns/">Über uns</a></li>
   <li><a href="http://www.mywebsolutions.info/kontakt/">Kontakt</a></li>
   <li><a href="http://www.mywebsolutions.info/faq/">FAQ</a></li>
   <li><a href="http://www.mywebsolutions.info/blog/">Blog</a></li>
  </ul>
  <!-- //---------------------// -->

</nav>

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

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

3] Save the file named as _nav-primary.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/global/

#5] If you want to add borders to the main menu, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .desktop .x-nav > li > a {
    border: solid 1px #e5e5e5;
    border-left: none;
}

.x-navbar .desktop .x-nav > li:first-child > a {
    border-left: solid 1px #e5e5e5;
}

Regretfully we cannot support any further modifications to the header other than minor cosmetic changes due to the fact that X is a highly dynamic theme with many elements being constructed on the fly based on options in the Customizer. Among these, the header is one of the more complex elements of the theme and structural modifications to it will likely lead to numerous layout problems as there are a lot of things to take into consideration because of X’s responsive nature. Taking all of this into consideration, these types of updates are out of the scope of our support as their involvement is simply too great and we are a very small team. While we would love to be able to assist all of our users with every customization request, the simple reality is that we cannot cater to every inquiry. Additionally, we will not be able to support any issues that might arise from modifications made to this area on your own.

Thank you for your understanding.

[Bell_Lodge]

Hi there Migaro

Have had a quick look and I think if you add

.x-topbar {
   min-height: 0;
}

.x-topbar .x-social-global {
   display: none;
}

That should help get things closer together.. You could alter the min-height to x pixels eg 10px if you wanted a little more space

Hope that helps.. Otherwise I’m sure Support will be along.

Rick M

NZ

[Migaro]

Thank you so much for your response. I followed steps #1, #2, #3 and #5

However, there’s still an issue. If full screen, it doesn’t look good. The menu bar has been misplaced. But in a different screen size, it’s better.

Please see this screenshots:
https://www.dropbox.com/s/qlw2mhgpf8yzbce/navbar%20issue.JPG
https://www.dropbox.com/s/qlw2mhgpf8yzbce/navbar%20issue.JPG

The first one shows the misplaced menu bar. I want it to look like the one in the second. It’s still the same but when the screen size changes, the menu bar also change its place. How can I make it stay?

[Christopher]

Hi there,

please add this CSS as well:

.x-navbar .x-container.max.width {
    max-width: 100%;
    width: 98%;
}

@media (max-width:1180px) and (min-width:979px){

.site-links {
    width: 25%;
    float: right;
}
.x-navbar .x-nav-wrap .x-nav > li > a {
    letter-spacing: normal;
}
}
@media (max-width:1083px) and (min-width:1032px){
.x-navbar .desktop .x-nav > li > a {
    font-size: 13px;
}
}
@media (max-width:1032px) and (min-width:979px){
.x-navbar .desktop .x-nav > li > a {
    font-size: 11px;
}
}

Hope it helps.

[Migaro]

Thank you so much for your help. I added that code but it doesn’t work. 🙁

https://www.dropbox.com/s/3bprbho0p1ia0zf/navbar%20issue2.JPG

I want the navigation menu (Home, Web Design, Logo and so on) to be placed below the other navigation (Referenzen, Kontakt, etc)

The code above didn’t work

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

nav.x-nav-wrap.desktop {
    clear: right;
}

Hope this helps – thanks!

[Migaro]

Update:

#1 – My navigation bar in header already placed nicely, well when in desktop/laptop. But when in mobile, it’s not showing. Also, the menu above the header navigation were dispersed when in mobile. How can I fix this?

Screenshot here – https://www.dropbox.com/s/20p0pjeb6x0lusi/navbarmobileissue.jpg

This is the code I used on the menu above the header navigation
https://www.dropbox.com/s/nuvwvnjgwayetwo/codetopbar.JPG

#2 – Also, is there a way that I can move the top menu a little more down to make it close to the header navigation?

Screenshot here – https://www.dropbox.com/s/ap8wo8a9qct33jz/navbar%20issue3.JPG

THANKS for all your help.

[Lely]

Hi Migaro,

#1 For the navigation menu in header we have to combine the following custom CSS:

.site-links li {
   display:inline-block;
   vertical-align:bottom;
}

And this :

.site-links li {
  	font-size: 12px;
  	line-height: 1em
}

To this:

.site-links li {
   font-size: 12px;
   line-height: 1em;
   display:inline-block;
   vertical-align:bottom;
}

Then also add this:

@media (max-width: 480px){
.site-links {
    width: 100%;
    clear: left;
}
/*Then we have to add this CSS for mobile display of menu button:*/
.x-btn-navbar.collapsed {
      color: red;/* Change red to your preferred color of the button*/
}
.x-btn-navbar:hover{
   color: red;/* Change red to your preferred hover color of the button*/
}
}

#2 Update this:

.site-links {
    width:30%;
    float:right;
}

To this:

.site-links {
    width:30%;
    float:right;
    margin-bottom:10px; /*Adjust this to your preferred space*/
}

Hope this helps.

[Migaro]

Thank you so much Lely!

That was great and it worked well. Everything is okay when in bigger screens like desktop, laptop. But in mobile, I just want to have some modifications though.

This is how my website looks like now in mobile view:
https://www.dropbox.com/s/5a9hqtwivspspew/Screenshot_2016-04-29-17-43-05.jpg

#1 – How can I move the 3 horizontal lines? I want it to be placed beside the logo.

#2 – The topbar navigation menu, I want it to be placed above the logo when in mobile view.

For your reference, I want it to look like this one:
https://www.dropbox.com/s/4p0n0ylyfxd58cl/Screenshot_2016-04-29-17-42-52.jpg

I hope you can help me with this. Thanks a lot.

[Rue Nel]

Hello There,

Thanks for the updates!

#1] To move the mobile menu icon next to the logo, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media (max-width: 979px){
  .x-brand.img {
    float: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .masthead-inline .x-btn-navbar {
    position: absolute;
    top: 30px;
    left: 0px;
  }
}

#2] If you want to move up the site links menu, it would entail different JS code that will moveup right above the logo.

(function($){
  var W = $(window).width;
  $(window).on('load', function(){
    if( W < 980 ){
      $('.site-links').insertBefore('.x-brand');
    }
  });
})(jQuery);

Regretfully we cannot support any further modifications to the header other than minor cosmetic changes due to the fact that X is a highly dynamic theme with many elements being constructed on the fly based on options in the Customizer. Among these, the header is one of the more complex elements of the theme and structural modifications to it will likely lead to numerous layout problems as there are a lot of things to take into consideration because of X’s responsive nature. Taking all of this into consideration, these types of updates are out of the scope of our support as their involvement is simply too great and we are a very small team. While we would love to be able to assist all of our users with every customization request, the simple reality is that we cannot cater to every inquiry. Additionally, we will not be able to support any issues that might arise from modifications made to this area on your own.

Thank you for your understanding.

[Author]

Posts