Download
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Changing hamburger menu from left to right

Forum › General Inquiry

  • September 24, 2023 at 9:17 pm #10633
    Avatar photo[anonymous]

    Hi, I’m new to Publii and have been working on creating a gallery/blog with the Mercury theme. I have a bit of experience with HTML and CSS but I’m no expert. I’ve changed the mobile menu font to be the same as the regular menu font (it was set to the heading font), but I had to add the code to the Custom CSS tool. Changing it in the CSS file did nothing for some reason, is that how it’s supposed to work?

    My main question is if there’s an easy way to change the location of the hamburger menu to the right side instead of the left. I like the theme but it bugs me that it’s on the left, I’m used to it being on the right. Is that possible to do?

    Bonus question: I’ve added a favicon and it’s working everywhere except Safari (this is all in preview mode). Is this a known problem and is there a fix?

    September 25, 2023 at 3:37 pm #10634
    Avatar photo[anonymous]

    I can’t edit my post, but I’ve found the solution. I found out about the template overrides, very useful. I changed this css code:

    grid-template-areas: ". nav logo search. ";
    to:
    grid-template-areas: ". search logo nav. ";
    Still wondering about the favicon though.
    September 25, 2023 at 7:01 pm #10635
    Avatar photo[anonymous]

    Sorry, can’t edit my reply either but it turns out that my solution offcentered the logo. I have no idea how to fix that so I guess I’ll have to put it back the way it was, unless someone here knows how.

    October 3, 2023 at 4:27 am #10671
    Avatar photo[anonymous]

    Hi Jai!

    [anonymous] wrote:

    Changing it in the CSS file did nothing for some reason, is that how it’s supposed to work?

    Looks like you’ve figured out theme overrides! Just make sure to to make your edits in `[root]/input/themes/mercury/assets/css/main.css` (if you don’t want to use a theme override) or `[root]/input/themes/mercury-override/assets/css/main.css` (for overrides).

    [anonymous] wrote:

    it turns out that my solution offcentered the logo

    It’s hard to give guidance without a screenshot or live demo, but this site‘s menu may help. It uses Mercury and has the menu to the right (overlay type).

    [anonymous] wrote:

    Bonus question: I’ve added a favicon and it’s working everywhere except Safari (this is all in preview mode). Is this a known problem and is there a fix?

    I don’t have any iDevices to test this on, but Stack Overflow seems to point to this site as as a potential diagnostic tool: https://realfavicongenerator.net/ You may need to generate a favicon with large dimensions, and/or manually add additional files.

    October 3, 2023 at 5:29 pm #10679
    Avatar photo[anonymous]

    Thanks for your reply! I’ve tried tinkering with it some more but either the logo or the button are never positioned exactly right, so I’m just leaving it where it is for now. I used the favicongenerator on another website I made before so I’ll do that, unless it’s just that it doesn’t work because I’m still in preview mode.

    October 3, 2023 at 5:34 pm #10681
    Avatar photo[anonymous]
    [anonymous] wrote:

    I’ve tried tinkering with it some more but either the logo or the button are never positioned exactly right, so I’m just leaving it where it is for now.

    Makes sense! If you want us to take a look once your site is live, don’t hesitate to reach out. Sometimes, it’s the smallest change.

    October 3, 2023 at 10:45 pm #10690
    Avatar photo[anonymous]

    Thanks again! I’ve managed to make it work now, simply by having the logo on the left side, which looks nice (I don’t have a search button).

    grid-template-areas: ". logo search nav .";