[Support request] show top bar widget only on mobile view

[Cynthia]

I’m using a top bar in order to create a call button, I have figured out how to hide it on dektop but

1) I would like the top bar background to be transparent ON MOBILE VIEW, (which it’s set to) but it’s currently showing white. AND I would like the blue header background-image to be flush to the top of the viewport as if I had no top bar.

2) I would like the button to be on the right side of the mobile viewport but when I add text-align:right; nothing happens.

Is this possible?

[Ying]

Hi Cynthia,

I’m not seeing a topbar on your site, can you confirm?

I would like the top bar background to be transparent, (which it’s set to) but it’s currently showing white

It’s likely the bodybackground if the topbar color set to transparent.

[Cynthia]

I updated my original inquiry……please refer to the mobile view for my questions……thank you

[Elvin]

Hi Cynthia,

For #1:

Were you trying to make it seamless like this? https://share.getcloudapp.com/DOumGeXG

Consider adding this CSS:

@media (max-width:768px){
    body {
        background-image: url(http://cynthiab29.sg-host.com/wp-content/uploads/2022/01/background.jpg);
    }

    header#masthead {
        background: none;
    }
}

For #2:

Try this CSS:

.inside-top-bar aside#sow-editor-7 {
    margin-right: 0;
    margin-left: auto;
}

[Author]

Posts