Architect Pro – top header colour – responsive mode

Home Forums All Other Themes Architect Pro – top header colour – responsive mode

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #92925
    mariatannant
    Member
    • Topics: 3
    • Replies: 8
    • Total: 11
    Member since: November 14, 2017

    Hi, I want to change the colour of the top header in responsive mode – currently it is set to almost black. I would like to lighten this.

    Please can you tell me how I can do this as the Theme Options in Basic Settings do not seem to allow me this option.

    https://jdbushdecorators.co.uk

    Thanks

    Maria

    #92931
    mariatannant
    Member
    • Topics: 3
    • Replies: 8
    • Total: 11
    Member since: November 14, 2017

    this is the color I want to use instead:

    #827b7a

    Thanks

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

    Hi,

    Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

    Add this code there:

    .header-top { background-color: #827b7a !important;}

    Regards,
    Chris

    #92957
    mariatannant
    Member
    • Topics: 3
    • Replies: 8
    • Total: 11
    Member since: November 14, 2017

    Hi Chris,

    Many thanks for this help. It works fine for responsive mode but the code overrides the ‘desktop opacity mode’ meaning the top banner picture is now masked by the top header background colour. Is there a way to have both options please.

    Thanks

    Maria

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

    Hi,

    Kindly use this code there:

    @media screen and (max-width:479px) {
    .header-top { background-color: #827b7a !important;}
    }

    Regards,
    Chris

    #92959
    mariatannant
    Member
    • Topics: 3
    • Replies: 8
    • Total: 11
    Member since: November 14, 2017

    Thanks for your help Chris, but this does not work. The ‘desktop opacity mode’ works but the dark responsive colour is still there and not #827b7a.

    I am using Safari on a Macbook Pro.

    Best

    Maria

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

    Hi,

    Can you send us the screenshot of your issues? Upload your screenshot on imgur.com and paste the share url here.

    Regards,
    Chris

    #92978
    mariatannant
    Member
    • Topics: 3
    • Replies: 8
    • Total: 11
    Member since: November 14, 2017

    Hi Chris,

    I have put the screen shots here:

    desktop view and responsive view

    I want the desktop mode to remain transparent using the opacity feature and the responsive top header background to be #827b7a

    Many thanks

    Maria

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

    Hi,

    This is working fine.

    Have a look at:

    View post on imgur.com

    Regards,
    Chris

    #93240
    mariatannant
    Member
    • Topics: 3
    • Replies: 8
    • Total: 11
    Member since: November 14, 2017

    Hi Chris,

    Yes it does work now, many many thanks. The only part which doesn’t work is when the responsive mode moves into tablet mode, then it turns very dark gain until it goes to desktop mode which if fine. I guess this is set by the @media screen and max-width value. Currently the code you gave me is set at:


    @media
    screen and (max-width:479px) {
    .header-top { background-color: #827b7a !important;}
    }

    Any help would be great.

    Thanks

    Maria

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

    Hi,

    Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

    Add this code there:

    @media screen and (min-width:768px) and (max-width:1023px) {
    .header-top { background-color: #827b7a !important;}
    }

    Regards,
    Chris

    #93314
    mariatannant
    Member
    • Topics: 3
    • Replies: 8
    • Total: 11
    Member since: November 14, 2017

    Thanks Chris, I will take a look.

    Best

    Maria

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

    🙂

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