Search in:
Suggested Search: installation, configuration
Search in:
Suggested Search: installation, configuration

Problem with Line Colors

Home › Forums › Pro Support › Problem with Line Colors

Viewing 15 posts - 1 through 15 (of 19 total)
1 2
  • Author
    Posts
  • May 11, 2020 at 12:59 pm #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.
    May 11, 2020 at 1:27 pm #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

    May 11, 2020 at 1:59 pm #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

    May 12, 2020 at 10:46 am #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

    May 12, 2020 at 2:42 pm #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.
    May 12, 2020 at 5:03 pm #70540
    Kenny SupertrooperKenny Supertrooper
    Participant
    This reply has been marked as private.
    May 14, 2020 at 3:21 am #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 3 years, 11 months ago by Kriti SharmaKriti Sharma.
    May 18, 2020 at 1:35 pm #70561
    Kenny SupertrooperKenny Supertrooper
    Participant

    Hi Kriti

    Hope you are feeling better today.

    Any progress on this issue?

    Ken

    May 19, 2020 at 10:03 am #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.

    May 19, 2020 at 10:23 am #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

    May 19, 2020 at 11:41 am #70573
    Kenny SupertrooperKenny Supertrooper
    Participant
    This reply has been marked as private.
    May 21, 2020 at 3:51 am #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

    May 21, 2020 at 5:55 am #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.
    May 22, 2020 at 2:15 pm #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

    May 22, 2020 at 5:55 pm #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

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 19 total)
1 2
  • The topic ‘Problem with Line Colors’ is closed to new replies.