Change Menu Icon

• 

  kutchak · Member · Feb 10, 2018 at 9:49 am

  • Copy link
  • Add topic to favorites

  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: http://pureline.xyz/

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

  

  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;
  }

• 

  floflo56 · Member · Feb 10, 2018 at 6:14 pm

  • Copy link

  Hi there,

  It sounds like your website is a self-hosted version of WordPress.org This forum is provided for websites hosted on WordPress.com.

  You can learn about the difference between WordPress.com and WordPress.org at this address : https://en.support.wordpress.com/com-vs-org/

  I recommend heading over to the WordPress.org forums and asking your question there.

  You can find those support forums here: http://wordpress.org/support/forums/

  Hope this helps.