Restaurant Pro mobile header background color

Home Forums All Other Themes Restaurant Pro mobile header background color

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #53961
    Customer
    Member
    • Topics: 36
    • Replies: 65
    • Total: 101
    Member since: March 13, 2016

    Hi:

    I am using Restaurant Pro and wonder how to change the header background color for mobile? Tried changing styles.css and Theme Options but did not work.

    Thanks

    Henry

    #54021
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25559
    • Total: 25559
    Member since: August 16, 2013

    Hi Henry,

    Kindly show us your website URL.

    Regards,
    Brad

    #54135
    Customer
    Member
    • Topics: 36
    • Replies: 65
    • Total: 101
    Member since: March 13, 2016

    Hi Brad:

    Please find the following URL http://aarondentistry.leafcom.org/. This theme looks great but the following issues need to be resolved:

    1. How to change header background on mobile? The default header background on mobile is grey.

    2. The logo width issue: Logo looks good on laptop, but very short in width on mobile, changed the following line in .CSS to width: 100%, now logo looks good on mobile, but menu items pushed to 2nd line as shown URL.
    .header .header-inner .logo{float:left; margin-top:20px; margin-left:180px; margin-right:50px; width:100%;}

    It would be great if you can help.

    Thanks

    #54237
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25559
    • Total: 25559
    Member since: August 16, 2013

    Hi Henry,

    Kindly go to Appearance>>Theme Option>>Basic Setting>>Custom CSS Box

    Add this code there:

    .header .header-inner{background:#000000 !important;}

    Regards,
    Brad

    #54238
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25559
    • Total: 25559
    Member since: August 16, 2013

    Hi Henry,

    Kindly go to Appearance>>Theme Option>>Basic Setting>>Custom CSS Box

    Add this code there:


    @media
    screen and (max-width:768px){
    .header .header-inner{background:#000000 !important;}
    }

    Regards,
    Brad

    #54382
    Customer
    Member
    • Topics: 36
    • Replies: 65
    • Total: 101
    Member since: March 13, 2016

    HI Brad:

    Thanks for the information. The mobile header background color is now working well.

    But the mobile logo is very short, believe affected by the following line in CSS.

    .header .header-inner .logo{float:left; margin-top:20px; margin-left:20px; margin-right:50px; width:22%;}

    #54389
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25559
    • Total: 25559
    Member since: August 16, 2013

    Kindly add this code in custom css box:


    @media
    screen and (max-width:768px){
    .header .header-inner .logo{width:auto !important;}
    }

    Regards,
    Brad

    #54929
    Customer
    Member
    • Topics: 36
    • Replies: 65
    • Total: 101
    Member since: March 13, 2016

    Hi Brad:

    Thanks, it works, appreciated. Meanwhile. A new issue:

    How to change mobile header background color to black while keeping the content background white?

    Thanks

    #54957
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25559
    • Total: 25559
    Member since: August 16, 2013

    Hi,

    Header color on mobile is currently black. Do you want to change the navigation background color to black on mobile?

    Regards,
    Brad

    #55028
    Customer
    Member
    • Topics: 36
    • Replies: 65
    • Total: 101
    Member since: March 13, 2016

    Hi Brad:

    The navigation background color is okay. The issue is for mobile header color above the navigation bar: Currently the mobile header black color is achieved by the following code:

    @media screen and (max-width: 768px) {
    body {background-color: #000000;}
    }

    The issue is – it also changed the content background color to black. Please visit page Practice on mobile to see this issue. The question is: how to change the header background color to black while keeping content background color as white?

    Thanks

    Henry

    #55058
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25559
    • Total: 25559
    Member since: August 16, 2013

    Hi Henry,

    Kindly remove the body background color code and add this code in custom css box:


    @media
    screen and (max-width: 768px) {
    .header{background:#000000 !important;}
    }

    Regards,
    Brad

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.