[Jai]

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?

[Jai]

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.

[Jai]

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.

[candidexmedia]

Hi Jai!

 

Jai 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).

 

Jai 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).

 

Jai 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.

[Jai]

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.

[candidexmedia]

Jai 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.

[Jai]

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 .";

[Author]

Posts