Change Menu Icon

  • kutchak

    (@kutchak)


    6 years, 2 months ago

    Hello,

    I want to change my menu icon in WordPress theme. I´m not good in CSS, so please can you help me?

    My pages:

    Now is there menu icon, but it would be best for me if the icon looked similar like this:

    https://pureline.000webhostapp.com/wp-content/uploads/2017/12/menu_icon.png

    I need wider and thicker lines.

    Is it possible to have this style? Thank you for every advice.

    Kind regards, Honza

    Now there are these CSS lines in my WordPress theme:

    #navi-trigger {
    position: relative; top:50%; float: right; margin-top: -8px; z-index: 10; cursor: pointer; height: 16px;
    }
    .navi-trigger-inn {
    display: block; position: absolute; right: 0; top: 0; width: 12px; height: 16px;
    }
    .navi-trigger-hamberg-line {
    width: 12px; height: 2px; position: absolute; top: 50%; right: 0; margin-top: -1px; background-color: currentColor;
    }
    .navi-trigger-hamberg-line {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    }
    body:not(.show_mobile_menu) .navi-trigger-hamberg-line {
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transition: -webkit-transform .2s;
    -moz-transition: -moz-transform .2s;
    transition: transform .2s;
    }
    .navi-trigger-text-inn > span {
    display: inline-block;
    }
    .navi-trigger-text-close,
    .show_mobile_menu .navi-trigger-text-menu,
    .show_mobile_menu .navi-trigger-text-close,
    .navi-trigger-text-menu {
    opacity: 0;
    -webkit-transition: opacity .3s .3s;
    -moz-transition: opacity .3s .3s;
    -ms-transition: opacity .3s .3s;
    transition: opacity .3s .3s;
    }
    .show_mobile_menu .navi-trigger-text-close,
    .navi-trigger-text-menu {
    opacity: 1;
    }
    .navi-trigger-hamberg-line1,.navi-trigger-hamberg-line3,
    .video-close:after,.video-close:before,
    .modal-content .close-btn:before,.modal-content .close-btn:after {
    content: ”; font-size: .1px; position: absolute; height: 2px; width: 100%; top: -9px; left: 0; background-color: currentColor;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    .navi-trigger-hamberg-line1 {
    top: 2px;
    }
    .navi-trigger-hamberg-line3 {
    top: 14px;
    }
    .show_mobile_menu .navi-trigger-hamberg-line1 {
    -webkit-transform:translateY(6px) rotate(45deg) scaleX(1.3333)!important;
    -moz-transform:translateY(6px) rotate(45deg) scaleX(1.3333)!important;
    -ms-transform:translateY(6px) rotate(45deg) scaleX(1.3333)!important;
    transform:translateY(6px) rotate(45deg) scaleX(1.3333)!important;
    }
    .show_mobile_menu .navi-trigger-hamberg-line3 {
    -webkit-transform:translateY(-6px) rotate(-45deg) scaleX(1.3333)!important;
    -moz-transform:translateY(-6px) rotate(-45deg) scaleX(1.3333)!important;
    -ms-transform:translateY(-6px) rotate(-45deg) scaleX(1.3333)!important;
    transform:translateY(-6px) rotate(-45deg) scaleX(1.3333)!important;
    }
    .video-close:after,.video-close:before,
    .modal-content .close-btn:before,.modal-content .close-btn:after {
    -webkit-transform: translateY(14px) rotate(-45deg);
    -moz-transform: translateY(14px) rotate(-45deg);
    -ms-transform: translateY(14px) rotate(-45deg);
    transform: translateY(14px) rotate(-45deg);

    }
    .show_mobile_menu .navi-trigger-hamberg-line2 {
    background:none;
    }
    .video-close:after,
    .modal-content .close-btn:after {
    -webkit-transform: translateY(14px) rotate(45deg);
    -moz-transform: translateY(14px) rotate(45deg);
    -ms-transform: translateY(14px) rotate(45deg);
    transform: translateY(14px) rotate(45deg);
    }
    .navi-trigger-text {
    display: block; height: 100%; line-height: 1; min-width: 120px; letter-spacing: 4px; text-align: right;
    }
    .navi-trigger-text-inn {
    position: absolute; display: inline-block; left: auto; right: 26px; top: 50%; margin-top: 1px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    }
    body:not(.show_mobile_menu) #navi-trigger:hover .navi-trigger-text {
    -webkit-transform: translateX(-4px);
    -moz-transform: translateX(-4px);
    -ms-transform: translateX(-4px);
    transform: translateX(-4px);
    }

    /* 1.4.2 Menu show */
    .heade-meta {
    float: right;
    }
    .navi-show:not(.ux-mobile) #navi-trigger {
    display: none!important;
    }
    body:not(.ux-mobile).navi-center .heade-meta {
    position: absolute; z-index: 0; left: 0; right: 0;
    }
    body:not(.ux-mobile).navi-center #header-main > .container-fluid {
    padding-left: 0; padding-right: 0; margin-left: 40px; margin-right: 40px; width: auto;
    }
    body:not(.ux-mobile).navi-center #header-main > .container {
    position: relative;
    }
    #navi-header {
    display: inline-block; float: right;
    }
    .navi-center #navi-header {
    float: none;
    }
    #navi-header>div>ul>li {
    margin-left: 30px; float: left;
    }
    body:not(.ux-mobile) .header-bar-social {
    float: right; margin-right: 20px;
    }
    #navi-header .sub-menu {
    position: absolute; top: auto; line-height: 30px; margin-top: -40px; padding: 10px; margin-left: -10px;
    }
    .non_bg_header #navi-header .sub-menu {
    background: none;
    }
    .header-scrolled #navi-header .sub-menu {
    margin-top: 0;
    }
    #navi-header li:hover > .sub-menu {
    display: block;
    }

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Sam

    (@soumendra)

    6 years, 2 months ago

    Hello @kutchak,

    You can try adding this CSS to your Custom CSS/ Additional CSS (Appearance > Customize > Additional CSS) for adjusting that:

    .navi-trigger-hamberg-line {
    height: 4px;
    width: 30px;
    left: 0;
}

    Hope that helps.

    Thank you.

    Thread Starter kutchak

    (@kutchak)

    6 years ago

    Sam, thank you very much!! It works. 🙂 But only on Chrome browser.

    It isn´t showing me right (on every pages) on Safari and Firefox browser. Only on main (first) page. Do you know how it is possible?

    Thanky you for every advice.

    Kind regards, Honza

    Sam

    (@soumendra)

    6 years ago

    Hello @kutchak,

    It seems to be an caching issue to me as some pages in Chrome browser also having the old menu in it .

    Can you please deactivate all the caching plugins as well as clear your browser cache to see if that fixes the issue you.

    Hope that helps.

    Thank you.

    Thread Starter kutchak

    (@kutchak)

    6 years ago

    Hello @soumendra,

    thank you very much for your answer and help. I tried to deactivate all the plugins, but it seems it can´t help to my issue. Do you have another idea to solve this issue?

    Please try it also on you browser:

    http://www.pureline.xyz

    Thank you Sam!

    Kind Regards Honza

    Thread Starter kutchak

    (@kutchak)

    6 years ago

    Now I see, that your CSS help works only on a few of pages in Firefox browser. It is very strange.

    Sam

    (@soumendra)

    6 years ago

    Hello,

    Can you please contact the hosting provider and ask them to clear the site cache to see if that fixes the issue for you.

    If till facing issue please run a quick conflict check on your website using the instructions below. You can follow these instructions on your live website as well, as running this conflict check does not affect your website visitors.

    Here are the steps for you to follow.

    1. Navigate to ‘Plugins’, and go to ‘add new’.

    2. On the next page, enter ‘Health Check’ in the search bar and wait for the screen to refresh.

    3. The official Health Check plugin by WordPress.org should be visible as the first result. Please install and activate the plugin.

    4. You will reach the plugin page automatically, and a notice will appear. Click ‘I understand’ to continue.

    5. On the WordPress Menu on the left, hover over the dashboard. You will notice a new ‘Health Check’ option, click on it.

    6. On the page that appears, there will be several tabs. Please navigate to the ‘Troubleshooting’ tab.

    7. Press the ‘Enable Troubleshooting Mode’ to start the troubleshooter.

    Once you complete these steps, you are in troubleshooting mode. All the plugins on your website have been disabled only for you. Your theme has also been disabled, but only for you.

    To diagnose the root-cause of your problem, you would enable your theme, then enable each plugin one by one until an issue is found. The last plugin that causes the issue will probably the cause of the conflict. Here are the steps in more detail.

    1. With all plugins and the theme disabled, try reproducing the issue.

    a. If you still have the issue, your WordPress setup is the root of the problem.
    b. If not, then continue.
    2. On the top bar, navigate to the ‘Troubleshooting Mode’, hover over it, and select ‘Use Your Current Theme’. After that, try to reproduce the issue.

    a. If you have the issue, the theme is conflicting with WordPress
    b. If not, then the theme is not causing issues with WordPress. Continue to the next step

    3. Navigate to the “Troubleshooting Mode” in the top bar again, but this time hover over the plugins section. Click on any one of the plugins to enable it. Then try reproducing the issue.

    a. If you have the issue, then the plugin you just activated is conflicting with the theme
    b. If not, then this plugin is not causing issues with the theme

    Repeat step no 3 by enabling one plugin at a time and checking if the problem exists. When the problem happens, the plugin you last activated is causing the issue.

    To confirm that our theme is causing the issue, you should also try to reproduce the issue even when the theme is disabled.

    To do that, navigate to the ‘Troubleshooting Mode’ in the top bar and select the option ‘Use a default theme’. This will disable our theme and revert to the default WordPress theme. Now try to reproduce the issue.

    1. If the issue does not exist, it’s confirmed that our theme was causing the conflict.
    2. If the issue still exists, then it’s not an issue with the theme, but more likely a plugin conflict.

    To confirm which plugins are causing the issue, enter the troubleshooting mode again by following the steps above.

    1. Do not enable the theme, let the troubleshooter use the default theme.
    2. Enable any one plugin and try to reproduce the issue. u1yBU
    a. If you have the issue, then you have identified the plugin which is causing the issue.
    b. If there is no issue, enable any other plugin and check again.

    Repeat the steps above until you find the plugin that is causing the issue, then contact the plugin developer to have the issue resolved.

    Once you complete all the above-mentioned steps, please let me know the results. Looking forward to helping you. Thank you.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Change Menu Icon’ is closed to new replies.