Docs

[fatheaddrummer]

Hi Awesome support Team,

First let me again tell you how awesome your support is! Thank you very mich for this so far!

I have a few questions to related URL, but if we make any changes, the should be global to the navbar of the whole website.
https://www.diamond-precision-studio.com/de/online-drummer-de/

1. Could you help me, centering the button in the navbar?
2. Could you help me, minifying the spacing between the links in the navbar just a little bit?
3. Could you help me switching the navbar to toggle button before(!) the menu splittls into 2 line, because if the screen get’s smaller…
4. I am using superfly menu on the left side…unfortunately the submenu in superfly is not working – what am i doing wrong?

Thank you very very much!

Best, Christian

[fatheaddrummer]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thanks for writing in!

1. To center the button in the navbar, add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

li#menu-item-8662 > a {
    padding-top: 14px !important;
}

2. To minify the spacing between the links in the navbar, you can use this code:

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

3. Please refer to this thread https://community.theme.co/forums/topic/stacked-navbar-wont-centre-align-on-renew/#post-300284 and replace the CSS code with this:

@media screen and (min-width: 980px) and (max-width: 1200px) {
	.x-nav-wrap.desktop {
		display: none;
	}
	.x-btn-navbar, .x-btn-navbar.collapsed {
		font-size: 24px;
		display: block;
		width: 4%;
		float: right;
	}
}

4. I checked your superfly menu and couldn’t find a sub menu in the menu list. Can you please confirm that the sub menu is added?

Hope this helps!

[fatheaddrummer]

Thanks a lot!!

1. The button worked great, but I am using this kind of button on all onepages. I am using the exact same design, so no extra design on several pages…could we use the code below globaly for al buttons in onepage navigations?

li#menu-item-8662 > a {
    padding-top: 14px !important;
}

2. That was perfect, thank you sooo much!

3. Also perfect thanks.

4. I have built a menu under appearance-menus called “main-de”. This menu is built with sub-items (you can see in the screenshot). I added this menu in superfly menu. The menu shows up, but the subitems don’t.
https://www.diamond-precision-studio.com/de/online-drummer-de
Screenshot: https://www.dropbox.com/s/xs66opflmsfuj15/Bildschirmfoto%202016-10-11%20um%2023.06.16.png?dl=0

Any ideas?

Thank you so much!
Best, Christian

[Lely]

Hi Christian,

1.) Can you clarify which button is still having issues? I can’t find any button with alignment issues. Please give us exact URL and screenshot so we can help you better.

4.) Go to Advanced Tab and then Enable Allow Submenu. See attached screenshot.

You’re welcome!
Cheers!

[fatheaddrummer]

Hello,
Thank you very much, the hint with submenu was exactly, what I’ve been searching for! 🙂

The button is NOT centered an ALL pages except the page, this code is relating to.
(https://www.diamond-precision-studio.com/de/online-drummer-de/)

li#menu-item-8662 > a {
    padding-top: 14px !important;
}

I am using several onepages and all onepages are using a different menu….but all of them are layed out the exact same way, so there should be a possibility the enter global css for all menu buttons. Just a few examples. All of them also in different language…:

https://www.diamond-precision-studio.com/de/mixing-online-de/
https://www.diamond-precision-studio.com/de/online-mastering-services-de/
https://www.diamond-precision-studio.com/de/schlagzeug-unterricht-wiener-neustadt-und-wien-de/

I hope I clearified better now!? 🙂
Thank you very much for the outstanding support!

Best, Christian

[Joao]

Hi There,

That is hapenning because each of your buttons is a different link so it has a different Id.

I have updated your code for you now to :

.desktop #menu-item-8622 > a , .desktop #menu-item-8695 > a , .desktop #menu-item-8629 > a , .desktop #menu-item-8685 > a  { 
    padding-top: 15px !important;
}
.desktop #menu-item-8622 > a > span:after,  .desktop #menu-item-8695 > a > span:after ,  .desktop #menu-item-8629 > a > span:after ,  .desktop #menu-item-8685 > a > span:after {
display: none;
}

What should include all 4 buttons.

Let us know if you need further help

Joao

[fatheaddrummer]

Hello Joao,

Thank you very very much for your help! I understand now. I didn’t know, that there is no way to to this globally…

If there’s no way around to have css settings for each item, I have to submit you all pages I need it for….I Am sorry, I didn’t submit all pages from the begnning, because these where just examples. Here’s all pages:

https://www.diamond-precision-studio.com/en/online-drumming/
https://www.diamond-precision-studio.com/en/mixing-online/
https://www.diamond-precision-studio.com/en/online-mastering-services/
https://www.diamond-precision-studio.com/en/mixing-drums-course/
https://www.diamond-precision-studio.com/de/mixing-online-de/
https://www.diamond-precision-studio.com/de/online-mastering-services-de/
https://www.diamond-precision-studio.com/de/mixing-drums-course-de/
https://www.diamond-precision-studio.com/de/schlagzeug-unterricht-wiener-neustadt-und-wien-de/

Could you help me out with a new code for this?

Thank you very much!
Best, Christian

[Christian]

Hey Christian,

Instead of targeting each menu, you can add a class to a menu and target that class. To do that, enable the CSS Classes in Appearance > Menu > Screen Options (located in the top right corner) (see attachment). Once done, you can add a class to a menu item (see attachment). You can then target the class instead of the ID (see attachment) like

.desktop .menu-btn > a instead of .desktop #menu-item-8622 > a

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer.

Thanks.

[fatheaddrummer]

Hi christian,

Thank you very much! This is a great hint and it works perfectly!!
Only when i scroll down the page, the button will jump out of its position…

I enter this code and gave all buttons the related css class:

.menu-btn > a {
    padding-top: 14px !important;
}

Could you please help me out with some code that prevents the button from jumping out of position, when scrolling down the page?

Thanks a lot!

Best, Christian

[Christian]

You have this in your CSS

.x-navbar.x-navbar-fixed-top .x-nav > li > a {
    padding-top: 30px !important;
}

That needs to be removed.

Thanks.

[Nabeel A]

Hi again,

Please add the following code in your Customizer:

body .x-navbar-fixed-top .desktop .menu-btn a {
    padding-top: 14px !important;
}

Let us know how this goes!

[fatheaddrummer]

That is perfect, thank you so much!!

Best, Christian 🙂

[Nico]

Hi There,

Thanks for writing in.

[Author]

Posts