Docs

[fatheaddrummer]

Hi There,

I have several onepages on my website and need to have one more menu location.

I want my main navigation menu on the very top and my related onepage navigation menu right below. For the moment I solved it the way that I am using the main header menu location for my onepage navigation and the topline of the header I used for the main navigation menu (test-wise: Link1, Link2, Link3)

My Problem is:
1. I want theese Links to be much more eye cathing – it should be the main navigation of the site and should look like it.

2. I am using polylang and presenting the website in 2 languages. Is it possible to create an english and a german version of the topbar?

Thanks for your awesome support and sorry for having soo many questions! 🙂

Related URL: https://www.diamond-precision-studio.com/en/online-drumming/

Best, Christian

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

p.p-info a {
    font-size: 15px;
    border: none !important;
    padding: 5px 10px;
}

#2 You can add two <div>s and hide one of them for each language :

<div class="lang-1">links for English version</div>
<div class="lang-2">links for German version</div>

Next add following CSS as well :

html[lang="en-US"] .lang-1 {
    display: none;
}
html[lang="de-DE"] .lang-2 {
    display: none;
}

Hope it helps.

[fatheaddrummer]

Hi Christopher,

Wow, thank you so much, that is an incredible solution!
This is what I have so far, when adding your code: https://www.diamond-precision-studio.com/en/online-drumming/

1. I think the languages are reversed because the german version seems to appear on the english version now?

2. How Can I use the div code in combination with the test links (link1, link2, link3) and get rid of the sentence “links for german version”? Sorry – I am new to this.

Thank you so much for your great help!!

Best, Christian

[Rue Nel]

Hello There,

Thanks for updating in!

1] Please use this code instead:

<span class="lang-item">links for English version</span>
<span class="lang-item">links for German version</span>

And you use this custom css:

html .lang-item {
    display: none;
}

html[lang="en-US"] .lang-item {
    display: block;
}
html[lang="de-DE"] .lang-item {
    display: block;
}

2] You will have to update your html code for the topbar. You can make use of this code:

<a href="url">link 1</a> <a href="url">link 2</a> <a href="url">link 3</a> <a class="lang-item" href="url">links for English version</a> <a class="lang-item" href="url">links for German version</a>

We would loved to know if this has work for you. Thank you.

[fatheaddrummer]

Dear Ruel,

Thank you very very much for helping me out. I added all code as you told me, but this looks a little weird…http://www.diamond-precision-studio.com/en/mixing-online/
Also I fear, that I don’t really yet understand, where I should put german and english links. In the html code I see only space for english links?!

ALso I have another question: How can I choose different onepage navigation menus for different onepages?

Thank you so much for helping me out!
This Forum is so great!

Best, Christian

[Rue Nel]

Hello There,

Sorry if it doesn’t work out as intended. Please have it updated and use this instead:

<span class="lang-item en">links for English version</span>
<span class="lang-item de">links for German version</span>

And then you can use this custom css:

html .lang-item {
    display: none;
}

html[lang="en-US"] .lang-item.en {
    display: inline-block;
}
html[lang="de-DE"] .lang-item.de {
    display: inline-block;
}

Hopefully this would work out now. Please let me know how it goes.

[fatheaddrummer]

Dear Rue,

Thank you very much fr helping mw out. Unfortunately it didn’t work :-/
This is what I have now in my Topbar content:

<a href="url">link 1</a> <a href="url">link 2</a> <a href="url">link 3</a> <a class="lang-item" href="url">links for English version</a> <a class="lang-item" href="url">links for German version</a>

<span class="lang-item en">links for English version</span>
<span class="lang-item de">links for German version</span>

Abt this is what I have in my css (regarding the language):

html[lang="en-US"] .lang-1 {
    display: none;
}
html[lang="de-DE"] .lang-2 {
    display: none;
}
@media (min-width: 980px){
    .x-navbar .ubermenu .ubermenu-target {
        line-height: 69px;
        padding-top: 0;
        padding-bottom: 0;
    }
}
html .lang-item {
    display: none;
}

html[lang="en-US"] .lang-item {
    display: block;
}
html[lang="de-DE"] .lang-item {
    display: block;
}
html .lang-item {
    display: none;
}

html[lang="en-US"] .lang-item.en {
    display: inline-block;
}
html[lang="de-DE"] .lang-item.de {
    display: inline-block;
}

Any other ideas?
Thank you very much!!

Best, Christian

[Christopher]

Hi there,

Please update your HTML to :

<span class="lang-item en"><a href="url">link 1</a> <a href="url">link 2</a> <a href="url">link 3</a> </span>
<span class="lang-item de"><a href="url">link 1</a> <a href="url">link 2</a> <a href="url">link 3</a> </span>

Update CSS to :

@media (min-width: 980px){
    .x-navbar .ubermenu .ubermenu-target {
        line-height: 69px;
        padding-top: 0;
        padding-bottom: 0;
    }
}

html[lang="en-US"] .lang-item.de {
    display: none;
}
html[lang="de-DE"] .lang-item.en {
    display: none;
}

Hope it helps.

[fatheaddrummer]

Hi Christopher,

That works perfectly! You’re awesome!! 🙂
1. Can we move it now to the right side, so it looks good with the 2nd. menu?
2. Could you tell me how to actually set URL links to those Link-names (Link1, Link2, etc…)
3. I guess, there won’t be any possibility use a submenu-function in the topbar, right?!
4. Is it possible to make the topbar also transparent?

Sorry for never ending questions….

Best, Christian

[Rue Nel]

Hello There,

Thanks for the updates!

1] To move the links to the right side, please use this code:

.x-topbar .p-info {
    float: right;
}

2] Regretfully we cannot support any 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.

3] To make the topbar transparent, you can make use of this code:

.site .masthead.masthead-inline {
    height: 0;
}

.site .x-topbar {
    background-color: transparent;
    height: 0 !important;
}

Hope this helps. Kindly let us know.

[Author]

Posts