Problem with Line Colors

Home Forums Pro Support Problem with Line Colors

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #70528
    Kenny SupertrooperKenny Supertrooper
    Participant

    The address of my test website is https://focusingonwildlife.com/test-platform5/ – I am trying to create different buttons for mobiles and desktops and have inserted the following CSS into the theme customizer:

    1) Desktop – these are also the settings in the admin section of the plugin. The button displays perfectly on desktops.

    @media (min-width: 768px) {

    button#responsive-menu-pro-button {
    width: 55px;
    height: 55px;
    position: absolute;
    top: 7%;
    right: 7%;
    color: #ffffff;
    background: #0dc5dc;
    display: inline-block;
    }
    }

    2) Mobiles

    @media (max-width: 768px){

    button#responsive-menu-pro-button {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 1%;
    right: 7%;
    color: #1e73be;
    background: transparent;
    display: inline-block;
    }
    }

    I only have a problem with the button on mobiles, which shows lines with color: #ffffff; instead of color: #1e73be; (see attached screenshot).

    How can I get the correct color on mobiles?

    Thanks in advance

    Ken

    Attachments:
    You must be logged in to view attached files.
    #70531
    Kriti SharmaKriti Sharma
    Keymaster

    Hi Kenny,

    For mobiles, use the following css code:

    @media (max-width: 767px){

    button#responsive-menu-pro-button {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 1%;
    right: 7%;
    color: #1e73be;
    background: transparent;
    display: inline-block;
    }
    }

    Hope this works.

    Regards,
    Kriti

    #70532
    Kenny SupertrooperKenny Supertrooper
    Participant

    Hi Kriti

    This doesn’t seem to change anything – please check out my test website on your mobile:

    https://focusingonwildlife.com/test-platform5/

    The 3 lines are white with a transparent background and when I click the desktop button with a turquoise background appears.

    The button should have three blue lines with a transparent background and spin when you click on the button.

    Hoping you can resolve this issue.

    Ken

    #70534
    Kriti SharmaKriti Sharma
    Keymaster

    Ok Kenny, please give me some time to look into the issue. I will get back to you soon.

    Regards,
    Kriti

    #70538
    Kriti SharmaKriti Sharma
    Keymaster

    Hi Kenny,

    Please check the following screenshot, the color of the lines are blue and not white. Please check the following screenshot.

    Please clear your browser cache and then reload your website.

    Regards,
    Kriti

    Attachments:
    You must be logged in to view attached files.
    #70540
    Kenny SupertrooperKenny Supertrooper
    Participant
    This reply has been marked as private.
    #70546
    Kriti SharmaKriti Sharma
    Keymaster

    Hi Kenny,

    I will check this and get back to you. Please expect a little delay in the response as I am little unwell today.

    Regards,
    Kriti

    • This reply was modified 2 weeks, 1 day ago by Kriti SharmaKriti Sharma.
    #70561
    Kenny SupertrooperKenny Supertrooper
    Participant

    Hi Kriti

    Hope you are feeling better today.

    Any progress on this issue?

    Ken

    #70569
    Kenny SupertrooperKenny Supertrooper
    Participant

    Now I am having problems to access the settings. I am unable to access the settings and can only see a gray area.

    I have tried disabling Various plugins including the caching plugin but this does not resolve the issue.

    I have also not received an answer from you on the line colors, which should be white.

    If I create an admin account for you, can you go into the backend of my website and esolve these two issues?

    Please confirm.

    #70571
    Kriti SharmaKriti Sharma
    Keymaster

    Yes, Kenny please provide me the admin credentials of your website so that our developers can look into the issue and give you the required solution.

    Regards,
    Kriti

    #70573
    Kenny SupertrooperKenny Supertrooper
    Participant
    This reply has been marked as private.
    #70578
    Kriti SharmaKriti Sharma
    Keymaster

    Hi Kenny,

    Please check for the plugin or theme conflict. To do this, check for plugin conflict or theme conflict. To do this, disable all of the plugins at once and enable them one by one by checking which one is causing the conflict. If this does not resolve the issue, change the website’s theme to another theme.

    Do tell me whether this resolves the problem or not.

    Regards,
    Kriti

    #70582
    Kenny SupertrooperKenny Supertrooper
    Participant

    Hi Kriti

    After carrying out the checks you suggest I can conclude that the problem with the line colors has nothing to do with plugin conflict or theme conflict.

    In my opinion it is only a question of getting the correct CSS to differentiate between desktop and mobile views. The CSS I am using is as follows:

    1) desktop (see attached screenshot)

    @media (min-width: 768px) {

    button#responsive-menu-pro-button {
    width: 55px;
    height: 55px;
    position: absolute;
    top: 7%;
    right: 7%;
    color: #ffffff !important;
    background: #0dc5dc !important;
    display: inline-block;
    }
    }

    2) mobile

    @media (max-width: 767px){

    button#responsive-menu-pro-button {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0.5%;
    right: 7%;
    color: #1e73be !important;
    background: transparent !important;
    display: inline-block;
    }
    }

    These CSS changes have also been saved in the plugin settings.

    How can we get white lines on the desktop button.

    Hope you can resolve this issue.

    Ken

    Attachments:
    You must be logged in to view attached files.
    #70588
    Kriti SharmaKriti Sharma
    Keymaster

    Hi Kenny,

    Please keep the blue color code in the plugin settings. and Paste the following CSS code in the Appearance-> Customize -> Additional CSS section.

    @media (min-width: 768px){
    .responsive-menu-pro-inner, .responsive-menu-pro-inner::before, .responsive-menu-pro-inner::after{
    	background-color: #fff;}}

    Now, the color of the lines will appear blue on the mobile and will appear white on the desktop settings.

    Hope this resolves your requirement.

    Regards,
    Kriti

    #70590
    Kenny SupertrooperKenny Supertrooper
    Participant

    Hi Kriti

    The code you gave us makes the button lines white as required.

    However with hover and click the button lines are still blue.

    How do we change the lines with hover and click to white?

    Please advise.

    Ken

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