Moving the mobile menu bar icon from right to left

Moving the mobile menu bar icon from right to left was created by WhataMack

Posted 5 years 1 month ago #51185
I want to move the three-line mobile menu icon in the Mobile Menu CK menu bar over from its default position on the right of the bar over to the left. I thought this would be pretty straightforward, but for me it definitely isn't (I might be missing an obvious way to do this, though).

From using the Firefox Inspector I could see that the style for the position of the mobile menu icon was specified by the "right:0;" property in this inline style:
Code:
.mobilemenuck-bar-button {cursor:pointer;box-sizing: border-box;position:absolute; top:0; right: 0;line-height:0.8em;font-family:Segoe UI;text-align: center;}

But I didn't know in which file that style was specified.

Next, I followed the instructions in the "Override in your template" section of this page in the Mobile Menu CK Tutorial area on the Joomla CK site: Style your mobile menu
  1. Copied the content of "plugins/system/mobilemenuck/default.txt"
  2. Created a "templates/YOURTEMPLATE/css/mobilemenuck.css" file and pasted the "default.txt" content into it
  3. Found the ".mobilemenuck-bar-button" class, and commented out "right: 0;"
  4. Saved the .css file and uploaded it to the template's css directory

But that didn't work in moving the menu icon to the left, so next I did this:
  1. Locally extracted the contents of the Mobile Menu CK component, "com_mobilemenuck_1.0.8" and searched for files containing ".mobilemenuck-bar-button". One of the files besides "default.txt" that had that class was "administrator/controller.php".
  2. I changed the line specifying the styles for the ".mobilemenuck-bar-button" class by removing the "right: 0;" property in it.
  3. I then uploaded the updated "controller.php" file to "administrator/components/com_mobilemenuck".

But after all that, the menu icon is still over on the right, not the left.

Now...is there some other, much simpler way to accomplish moving the icon that I'm missing? (I'm assuming the styles in "controller.php" override styles in "mobilemenuck.css").
Last Edit:5 years 1 month ago by WhataMack
Last edit: 5 years 1 month ago by WhataMack.

Please Log in or Create an account to join the conversation.

Replied by ced1870 on topic Moving the mobile menu bar icon from right to left

Posted 5 years 1 month ago #51190
Hi
you must use this
Code:
.mobilemenuck-bar-button { right: auto !important; }
to force the right position to let the icon go on the left. You can add this in the Custom CSS area in the style interface or Mobile Menu CK

CEd

Joomlack Webmaster and Developer

by ced1870
The following user(s) said Thank You: WhataMack

Please Log in or Create an account to join the conversation.

Replied by WhataMack on topic Moving the mobile menu bar icon from right to left

Posted 5 years 1 month ago #51203
Hi, and thanks for the quick reply (as always)! I added that into the Custom CSS area in the style section for Mobile Menu CK and has moved the icon to the left.

But I'm curious about something. I would have thought that using "left" instead of "right" would be what was needed to move the icon to the left, as shown here:
Code:
.mobilemenuck-bar-button { left: auto !important; }

Please Log in or Create an account to join the conversation.

Replied by ced1870 on topic Moving the mobile menu bar icon from right to left

Posted 5 years 1 month ago #51204
Hé hé, CSS is a game ;)
as there is right 0, it forces the item to move to the right, no matter which value you set in the left attribute
you must remove the right value using the auto, that's all

Joomlack Webmaster and Developer

by ced1870
The following user(s) said Thank You: WhataMack

Please Log in or Create an account to join the conversation.

Replied by WhataMack on topic Moving the mobile menu bar icon from right to left

Posted 5 years 1 month ago #51205
"CSS is a game." That's a great way of putting it. And it's a game where the rules can be very bizarre.

Thanks again as always for your help, Cédric. It's a pleasure to use your wonderful products and to have great support.

Please Log in or Create an account to join the conversation.

Replied by ced1870 on topic Moving the mobile menu bar icon from right to left

Posted 5 years 1 month ago #51206
thank you :)

Joomlack Webmaster and Developer

by ced1870

Please Log in or Create an account to join the conversation.

Time to create page: 0.640 seconds

Fast and powerful creation, customizable and responsive.

Read More

We have 1021 guests and no members online