How to move/create "lang" module position next to the menu?

Hi,

I'm trying to move the "lang" module position to the right side of the menu (between the menu and the login button) but I can't find how. I've also tried to create a new module position with the guide posted in this forum and it's been quite a chaos.

Can anybody help me?

Hi

Please edit /layout/default.php and cut the cod from lines: 226-232

Code: Select all

          <?php if($this->API->modules('lang')) : ?>
          <section id="gkLang">
             <div class="gkPage">
                  <jdoc:include type="modules" name="lang" style="<?php echo $this->module_styles['lang']; ?>" />
               </div>
          </section>
          <?php endif; ?>


paste it after line 77 which looks like this:

Code: Select all

             <div id="gkHeaderNav">                       


Show me Your site than and I'll help with fixes to the style to position it correctly.

Hi teitbite,

Thank you for your time. My website is laraiz.es, it's actually offline but I've PM you user/pass.

Thanks!

Hi

I've enabled override.css file on Your site and used this code to position lang module next to Logout button:

Code: Select all

#gkLang {
    float: right;
    margin-right: 105px;
}


You still have not set menus for different langs so flags are not visible, when they do it's possible some adjustment to margin value will be required.

Hi teitbite,

First, thank you very much for your help!

Right now I can't see the Custom HTML module that I placed in lang position with some text until I had the languages working. I've tried with Chrome and Firefox and it's not there. Are you still working on it?

I've already ativated the languages so you can test it.

Hi

I was not. But I can see small issue with the code I've added. Please replace it with:

Code: Select all

#gkLang {
    float: right;
    margin-right: 105px;
    position: relative;
    z-index: 1;
}


Yeah, perfect! Just a bit of css styling left

Thank you!

Hi

Ok. Please just tell me what styling You have in mind exactly and I'll help with this as well.

Hi teitbite!

Thank you for all your help. Right now I have this code:

override.css

Code: Select all

#gkLang {
    float: right;
    margin-right: 145px;
   margin-top:8px;
    position: relative;
    z-index: 1;
}

custom css in template.css

Code: Select all

.gkmenu.level0 {
   margin-left:14%;
}

It's working quite well with my resolution but it makes weird things when resizing the window and with the mobile layout (as far as I've seen for now).

Can you improve it?

Hi

Ok. Here is some custom code to put to override.css

Code: Select all

@media only screen and (max-width:1290px) {
#gkLang {
    margin-right: 125px;
}

.gkMenu > ul > li > a {
    padding: 0 10px;
}
}

@media only screen and (max-width:1110px) {
#gkLang {
    position: absolute;
    right: -100px;
    top: 50px;
}
}


It works great, thank you. The problem with the mobile layout is solved but the resizing window problem is still there... Anyway, if you can figure out how to fix it, great, if you don't, don't worry

Thanks!

Hi

What resizing issue You have in mind ? The code I gave You is being activater for a certain screen widths. Maybe You just need to adjust values in it.

Hi teitbite,

This the evolution of the menu when I resize the window. As you can see, there are plenty of weird things, like:

- Menu displacement on stage 2
- Menu cutting error and lang module displacement on stage 3
- Menu icon weird alignment and lang module displacement on stage 4
- Logo subtitle displacement and lang module displacement on stage 5

It's quite a chaos...

...

Hi

Looks like adding this icons has destroyed the template. Is ther a different place we can use ? If not than I'll recode the template for You, but it's gonna take a lot of time. Maybe a small tab like element over the site in right or left edge ?

Hi teitbite,

Thank you very much for your concern. I need the website working on Dec 1st, so I can't try too many things... Right now is perfect except for the resizing problem, but if you offer me another option we can try it, of course! I've changed the flags icons for the language initials due to a client request, but I think it keeps quite similar as we have it before

Anyway, I'm at you disposal!

Hi

I would suggest a solution like this:

Code: Select all

@media (max-width: 1110px) {
#gkLang {
    background: none repeat scroll 0 0 #444444;
    border-radius: 5px 0 0 5px;
    margin: 0;
    position: fixed;
    right: 0;
    top: 100px;
}
div.mod-languages ul.lang-inline li {
    display: block;
}
}


The result would be as You can see on the screenshot.

Hi teitbite,

That option looks great. The only problem I can see now is that in my screen the new language position is shown horizontaly instead of verticaly as in your screen caption.

Can you solve it?

Thanks!

Hello,

Can I suggest that you go to:

Extensions -> Module Manager -> Language Switcher

and there deactivate the "Horizontal Display".

That did it for me.

I only have one issue. My links are grey.... they aren't withe as I saw on your screenshots. Please help! http://dragosnicu.com/acme

If I disable the "horizontal display" option in the module, I lose the horizontal display when it's inside the menu too...

My color configuration is this:

Code: Select all

#gkLang a {
   color:#ccc;
}

#gkLang a:hover {
   color:#E74C3C;
}


It is inside the overide.css file, but if you don't have it activated you can also put it inside template.css

Hi

A vertical display is possible because of this part of the code:

Code: Select all

div.mod-languages ul.lang-inline li {
    display: block;
}


which is included in my previous code. Please just make sure that You are copying it correctly.

Hi teitbite,

It was right copied but it wasn't working, I made it work with this code:

Code: Select all

div.mod-languages ul.lang-inline li {
    display: block !important;
}

Thank you very much for your efforts teitbite, it's perfectly solved now

For the record, I'll leave here the full code:

Code: Select all

#gkLang {
    float: right;
    margin-right: 9%;
   margin-top:9px;
    position: relative;
    z-index: 1;
   font-size: 12px;
}

#gkLang a {
   color:#ccc;
}

#gkLang a:hover {
   color:#E74C3C;
}


@media only screen and (max-width:1290px) {
#gkLang {
    margin-right: 125px;
}

.gkMenu > ul > li > a {
    padding: 0 10px;
}
}

body.frontpage #gkPageContent div.gkPage {max-width: none;}

body.frontpage #gkPageContent #gkMainbody .box {overflow: hidden;}

@media (max-width: 1110px) {
#gkLang {
    background: none repeat scroll 0 0 #444444;
    border-radius: 5px 0 0 5px;
    margin: 0;
    position: fixed;
    right: 0;
    top: 100px;
}
div.mod-languages ul.lang-inline li {
    display: block !important;
}
}

Hi

No problem. Glad I could help