travelI'm on Holidays until the 21th august.

The questions posted during this period will receive no answer, so please be patient and wait before posting in the forum. Thank you

New registrations are suspended during this period

Je suis en vacances jusqu'au 21 aout.

Je ne répondrai à aucune question postée durant cette période. Merci d'attendre mon retour. Merci

Les inscriptions sur le site sont suspendues pendant cette période

 

Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC: Moving the mobile menu bar icon from right to left

Moving the mobile menu bar icon from right to left 19 Feb 2019 23:13 #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:
.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").

Please Log in to join the conversation.

Last edit: by WhataMack.

Moving the mobile menu bar icon from right to left 20 Feb 2019 08:03 #51190

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23185
  • Karma: 427
  • Thank you received: 2919
Hi
you must use this
.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
The following user(s) said Thank You: WhataMack

Please Log in to join the conversation.

Moving the mobile menu bar icon from right to left 20 Feb 2019 14:17 #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:
.mobilemenuck-bar-button {
    left: auto !important;
}

Please Log in to join the conversation.

Moving the mobile menu bar icon from right to left 20 Feb 2019 14:52 #51204

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23185
  • Karma: 427
  • Thank you received: 2919
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
The following user(s) said Thank You: WhataMack

Please Log in to join the conversation.

Moving the mobile menu bar icon from right to left 20 Feb 2019 16:03 #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 to join the conversation.

Moving the mobile menu bar icon from right to left 20 Feb 2019 16:20 #51206

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23185
  • Karma: 427
  • Thank you received: 2919
thank you :)
Joomlack Webmaster and Developer

Please Log in to join the conversation.

  • Page:
  • 1
Time to create page: 0.261 seconds

Fast and powerful creation, customizable and responsive.

Read More

Qui est en ligne

We have 830 guests and no members online