Joomla 1.7, Module is dropping below it&#x27;s assigned area

ASKER

http://desertnetworksolutions.com

You mention User-2 position as the position you want this icon set to be placed in.. but when I checked your site, it is actually in User-1 position.. is this correct??

ASKER

Lol, yes that's correct. I have it in user-1; that was just a typo. Thanks

ok, great... so, to clarify, you want the social icons to be at the right side of the menu bar (black bar) correct?
If that's correct,.. the menu itself is located in user-4... is it possible the icons are in the wrong module position??

ASKER

Yes, that is correct. User-4 is the MaxiMenu module and user-1 is the far right end of the menu. I have even tried putting the social media icons in user-4 but it still has the same effect. When I enable the default search box in user-1 that came with the template it stays in the proper location and doesn't drop below the menu.

Interesting, then it is most likely a CSS issue.. couple questions:

1) When you look at the now disabled default search module that was in user-1, does it have any Module Class Suffix applied to it
(admin > Extensions > Module Manager > click on module, view setting on right side of page)

2) If there is no Module Class Suffix applied to the default search module item, can you re-enable it,.. and disable the social icons and reply back.. then I can compare the CSS.

Thanks!

ASKER

No module class sufix to the search module. What is the purpose of the module class suffix anyway?

I will disable the Social Media Icon module and re-enable the search menu. The template support company said it has something to do with the maximenu css code. Here is what they said below but the path was slightly different and neither of the CSS files had the code in it to be modified.

You can put social links module on user 1 position via css:

modules/mod_maximenu/default/

find the code

element.style {
position: relative;

and add

position: relative;
top: -33px;

Ok,.. find your CSS sheet for your maximenu in this folder:
http://desertnetworksolutions.com/templates/theme798/css/themes/default/css/ (not sure of the name for the CSS since they are compressing and sending it to the browser as maximenuH_CK.php

Then, RIGHT AFTER :

.navigation #maximenuCK {
    margin:0;
    padding:0;
    
}

Add:

.navigation .moduletable {
	position: relative;
	top: -33px;
}

That should work ;)

After reviewing your CSS for the search box more closely, I would recommend doing this instead:

Instead of using the .navigation .moduletable styling I provided above,.. replace it with this:

.navigation .smile {
	position:absolute; 
	top:5px; 
	right:8px;
	height:36px;
	width:265px;
}

And, instead of the menus CSS I would recommend placing it in your themes personal.css right AFTER:

.moduletable .search {...}

ASKER

I added the code below in my personal.css. Was that what you wanted me to do?
.navigation .smile {
      position:absolute;
      top:5px;
      right:8px;
      height:36px;
      width:265px;
}

Yes, perfect.. and disregard the code I posted before that.. this should be all you need. Now, if you disable the search and enable the social icons, they will line up at the right of the menu bar.. ;)

ASKER

I adjusted those parameters in the personal.css and it still seems to be misaligned. Do you think I should edit more code in the personal.css? Thanks for the help

Have you already uploaded that personal.css to the website? I just checked the site, and that code is not included in the peronsal.css for your theme,...

ASKER

Here is what I have in my personal.css from theme798/css/.
.moduletable .search {
position:absolute;
top:5px;
right:8px;
height:36px;
width:265px;
}

Was I supposed to put the .navigation .mile in there somewhere? Sorry about this

Ok, I see what happened. You changed the .moduletable .search CSS instead of ADDING this code right after it ( :D ) :

.navigation .smile {
      position:absolute;
      top:5px;
      right:8px;
      height:36px;
      width:265px;
}

SO, here is what needs to be done.

1) Return the .moduletable .search code to it's original state.

2) Include the code I posted right above these instructions.. right AFTER the .moduletable .search code.

3) Upload the personal.css sheet..

ASKER

OMG, thanks for helping. What does that extra code do to the template to allow the module user-1 in that space? Will this be a problem the next time I update my MaxiMenu. Can't thank you enough!

ASKER CERTIFIED SOLUTION

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

ASKER

Worked like charm!!!