Logo displaying without transparency

Hey @sec55,

this is not related to the particular theme, but I can see that your logo is currently a .jpg image – make sure you save it as a .png file with transparent background ??

That’s weird, I uploaded the transparent png. Funny that it didn’t display it. I re-uploaded it and now it is transparent. Thanks for the help even though you didn’t have to!

More problems has arisen, however. Now the side margins are gone and the text is right up against the left side of the browser window, and the menu is now a hamburger icon on the left side instead of text on the right side.

I changed the logo to the png and made a few other cosmetic changes, but I didn’t do anything that should have caused that. Any ideas?

What is the screen width of a device you’re viewing the website from? All mentioned items display as intended on my machine, by your description it looks like a mobile view is active on yours?

Hmm, now it’s OK for me, too. I was on my current laptop, not a phone. Weird.

UPDATE: I clicked on a link, and now it is back to displaying without the side margins and with the icon instead of the menus. Please look at it again.

• This reply was modified 6 years, 11 months ago by sec55.

It must be a media query that is doing it. If I have my browser window super wide, the menus display. If it’s even a little bit narrower, the menus disappear and the icon appears.

Also, I changed the content width in Site Layout from 900 to 960, so now when it hits the break point there is some margin on the sides. But I would prefer 900.

I haven’t entered any media queries in the additional CSS. What are the MQs for the theme?

• This reply was modified 6 years, 11 months ago by sec55.

And I do have desktop view selected in the controls.

The theme’s mobile styles kick in at 1024px, i.e. smaller than the majority of non-touch devices like laptops and desktops nowadays. Could you please let me know which window width transforms the website into mobile mode on your device? You can do this by activating the developer console and looking at the screen size box in the top right corner as you re-size the window.

After looking at this for a while, I really don’t like it changing at so wide a window. Is there any way to change those break points?

There’s no back-end setting to change the breakpoints in Bento, but you can try copying the entire style block for the @media screen and (min-width: 64em) { ... } breakpoint from the theme’s style.css into a child theme and adjust the em-value there to fit your needs. It’s 16 times the actual pixel width of the breakpoint, i.e. if you need a breakpoint at say 896 pixels, you’ll need to use 56em.