Docs

[gobeyondesign]

http://www.arrowwoodlandscape.com

#1 – I am not able to change the text size in mobile view on my top bar.

#2 – I have an image set as the background for the desktop but for some reason it turns charcoal gray in mobile view and it is not tall enough for all of the text.

#3 – the mobile navigation button does not work. I think its because the z-index for the nav bar for desktop view is set to 1032.

Please help.

[gobeyondesign]

This reply has been marked as private.

[Lely]

Hi There,

Thank you for posting in and giving us your site credentials.

#1. Please use the following custom CSS:

@media (max-width: 480px){
.x-topbar p.p-info {
    font-size: 15px; /*Change to your preferred font size*/
}
}

#2. Please clarify which image or section you’re referring to. Since the content will be stacked up on mobile view, it is better if we can use a different background image. More of vertical image to accommodate all content. We can do this with some custom CSS.

#3. Did you figure out this already? Mobile menu button is now working upon checking.

Hope this helps.

[gobeyondesign]

#3 – I did figure out.

#2 – I can create a new image background for the mobile view top bar, but my css code is not working. Can you take a look at my css code – the mobile code are lines 163-194

#1 – didn’t work.

I think I need css code for tablet version and then another for mobile. How do I create two separate parameters for this?

Maybe the solution is to code a gradient background color – is this possible?

[Nabeel A]

Hi again,

#1 For tablets and mobile devices you can use this code:

.touchevents .x-topbar p.p-info {
    font-size: 15px !important;
}

#2 To change the background-image for the smaller screens, you can use this code:

@media screen and (max-width: 768px){
.x-topbar {
    background-image: url('http://path/to/your/image.png');
}
}

Let us know how this goes!

[Author]

Posts