Elxis CMS Forum

Extensions => Modules => Topic started by: armpouniotis on January 10, 2019, 22:14:09

Title: Mega Menu color changes
Post by: armpouniotis on January 10, 2019, 22:14:09

Hi there !

is it possible for anyone to explain to me how to change the mega menu CSS attributes, in order to change the background color, the font color and some other things, in 1st and 2nd level ?

I am really confused on how to changed all these stuff....

Thank you in advance !
Christos

Title: Re: Mega Menu color changes
Post by: webgift on January 12, 2019, 00:13:47

What do you want to do in particular? Do you have any ready demo example for testing?
 

Title: Re: Mega Menu color changes
Post by: Trophybiker on January 12, 2019, 00:18:05

I did this here:  /modules/mod_mega_menu/inc/megamenu.css   and also   /modules/mod_mega_menu/inc/megamenu-rtl.css

Title: Re: Mega Menu color changes
Post by: armpouniotis on January 12, 2019, 19:36:55

Hi there !

Check this:

http://www.armpouniotis.gr/

I just want to do some simple things in 1st & 2nd level:

Change font color, change background color, width etc

Thank you in advance
Christos

Title: Re: Mega Menu color changes
Post by: webgift on January 13, 2019, 10:42:41

That's right as @Trophybiker mentioned. You could edit megamenu.css only if you don't
use RTL languages.
Take under consideration that the template you use 'artisian' loads its CSS file at
the bottom of the generated HTML document. That means that it could bypass some
module's CSS rules thus, it could affect the general module's appearance.
 

Title: Re: Mega Menu color changes
Post by: armpouniotis on January 13, 2019, 13:02:11

Hi there !

my question is:

which attributes of the mega menu css file should I change in order to make these changes ?

Thank you in advance
Christos

Title: Re: Mega Menu color changes
Post by: webgift on January 15, 2019, 08:11:36

As far as i can see you find them out. ;)

Title: Re: Mega Menu color changes
Post by: armpouniotis on January 15, 2019, 12:41:53

More or less yes, i managed to edit it !

Now my problem is that in mobile version, this mega menu is showed horizontally and not vertical as i want it to be.

Any ideas of how can i do that ?

Title: Re: Mega Menu color changes
Post by: datahell on January 15, 2019, 21:59:34

I don't know megamenu but it doesn't look to be responsive. So, it has the same look for mobile phones as for desktop computers.

To change mengamenu style on mobile phones you must write media queries in module's css file.

Question: Why you use megamenu? I dont see a complex menu in your site. You have a typical menu which can be displayed fine with the standard Elxis menu module which, in comparison to the megamenu, is responsive. The only thing that you will have to do is to change the menu colours in your template's css file.

Title: Re: Mega Menu color changes
Post by: armpouniotis on January 15, 2019, 22:47:44

Hello dataHell !

I am using mega menu because it is dropdown menu on hover.

As far as I see, Elxis standard menu is not a dropdown, and it displays sub menu items without hover !

I don't know if this is true, but please correct me if I am wrong ! You will save my night time !!!

Thank you in advance
Christos

Title: Re: Mega Menu color changes
Post by: nikos on January 15, 2019, 23:26:33

Elxis standard menu module displays sub menu items on hover, is responsive and customizable by css, so you can use it instead of Megamenu.

Title: Re: Mega Menu color changes
Post by: armpouniotis on January 15, 2019, 23:32:51

Hi there !

please, show me an example !

Christos

Title: Re: Mega Menu color changes
Post by: nikos on January 15, 2019, 23:39:56

If you load a standard Elxis 4.6 installation on localhost or even online with flex template which is the default one of any elxis installation you can see it.

Title: Re: Mega Menu color changes
Post by: armpouniotis on January 15, 2019, 23:52:42

ok !

I will check it out and I will let you know !

Christos

Title: Re: Mega Menu color changes
Post by: nikos on January 16, 2019, 00:01:04

And look also this topic (https://forum.elxis.org/index.php?topic=8803) how you can add font awesome icons on menu items.

Title: Re: Mega Menu color changes
Post by: armpouniotis on January 16, 2019, 00:14:31

Hi there !

Now, I see a new installed version of elxis, but I can't see any dropdown menu !

I am hovering all menus, but I can't see any sub item !

Can you please help me a little bit more ?

Christos

Title: Re: Mega Menu color changes
Post by: nikos on January 16, 2019, 00:26:31

Ηave you added some children menu items on one main item in order to check it?

Title: Re: Mega Menu color changes
Post by: armpouniotis on January 16, 2019, 00:42:06

Yes,

I see your point ! You are right !

Now I am checking the .css file to see how it is done !

I will let you know !

Thank you
Christos

Title: Re: Mega Menu color changes
Post by: nikos on January 16, 2019, 00:53:05

You are welcome!

Study well on a localhost installation the template.css file of flex template. Look at classes elx_menu for horizontal menu and elx_vmenu for vertical menu. There you can find all you need doing tests.

Title: Re: Mega Menu color changes
Post by: webgift on January 16, 2019, 08:54:49

Unfortunately Mega Menu is not responsive thus, we have the same appearance for both
desktop and portable devices. Follow @nikos and @datahell advice and you'll find out an
alternative option. I'm sure you'll finally find out what you need.

Title: Re: Mega Menu color changes
Post by: armpouniotis on January 16, 2019, 21:00:09

Hi there !

Now my problem is this:

I have made a div, and Inside that I have placed the main menu with its sub items.

Everytime, I am hovering on the menu to see the sub items, the div's height gets bigger !

How can I make the height to be stable ?

Please, see: www.armpouniotis.gr

and let me know !


Thank you in advance
Christos

Title: Re: Mega Menu color changes
Post by: nikos on January 16, 2019, 22:27:18

I advised you previously to study flex template, not only for menu, because is a very good one, responsive and adaptive, but I see that you work on delta which is an old non responsive template.

Title: Re: Mega Menu color changes
Post by: armpouniotis on January 16, 2019, 22:50:14

Hi there !

thank you for your advise !

I have managed to make it ! Now, I have already understood all the necessary css attributes for sub items etc !

Yes, in that way, my life got easier for me !

Thank you very much !

Christos

Title: Re: Mega Menu color changes
Post by: bully on November 22, 2019, 07:14:42

Hi Christos,

changes inside a css can have quite complex effects. My suggestion: in the debugger, you can just overwrite almost any value, to see the immediate changes and another possible good idea:
Don't overwrite any settings or delete something.
prefix the entries with: //
and then copy the the original and change the value
So you can always roll-back changes made easy.
Once your design is sorted, then you can delete all entries, beginning with //
Look at the screenshot, so you can detect/select the single elements and also "overwrite" them for a preview