چگونه Navbar کشویی کنم ؟

[MR-K4SR3]

سلام و درود ، سوالی داشتم درمود نو بار ، میخوام این navbar قالب دیفالت رو کشویی کنم کسی میدونه چطوری ؟

@Arash.Ranjbar @Sajjad 

[Support]

سلام. دسترسی به سیستم ندارم که کدشو برات بزنم. 

اگر تا فردا صب کنی کدشو برات میزنم. اگرم کسی زودتر جوابتو داد که هیچ

[Support]

کدهای زیر رو تو custom.css قرار بده

#ipsLayout_header nav {
  background:#000;
  position: relative;
  flex-grow: 8;
  font-weight: 600;
  margin: 0 5px;
}

#ipsLayout_header nav::after {
  height: 0;
}

.ipsNavBar_primary {
  margin-bottom: 0;
}

.ipsNavBar_primary > ul > li {
  position: relative;
  margin: 0 5px;
}

.ipsNavBar_primary > ul > li > a {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
  position: relative;
  text-decoration: none;
  background: linear-gradient(45deg, var(--secondaryColor), var(--mainColor)) bottom / 0 .1em no-repeat;
  transition: 200ms background-size;
  padding: 0px 10px;
}

.ipsNavBar_primary > ul > li > a:hover {
  background-size: 100% .1em;
}

.ipsNavBar_active .ipsNavBar_active__identifier {
  display: none;
}

.ipsNavBar_primary > ul > li.ipsNavBar_active > a:first-child::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid var(--mainColor);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.ipsNavBar_primary > ul > li.ipsNavBar_active > a:first-child{
  background-size: 100% .1em;
}

.ipsNavBar_secondary:before {
  content: '';
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--secondarynavbar-bg);
  z-index: 9999999;
  position: absolute;
  top: -10px;
  left: 16px;
  width: 0;
  height: 0;
}

.ipsNavBar_secondary {
  background-color:#0000;
  min-width: 215px;
  top: calc(100% + 12px);
  border-radius:#000;
  opacity: 0;
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}

.ipsNavBar_secondary::after {
  content: '';
  top: -12px;
  position: absolute;
  height: 12px;
  width: 100%;
  display: block;
}

.ipsNavBar_primary > ul > li:hover > .ipsNavBar_secondary {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: bubble 200ms;
}

@keyframes bubble {
  0% {
    transform: translate(0, 50px);
  }

  50% {
    transform: translate(0, -20px);
  }

  100% {
    transform: translate(0, 0);
  }
}

.ipsNavBar_secondary > li {
  float: none !important;
  display: block;
}

.ipsNavBar_secondary > li > a {
  float: none;
  text-align: left;
}

حالا تو تب فایل فایل navbar  رو پیدا کن و دنبال کد زیر بگرد

<nav data-controller='core.front.core.navBar' class='{{if !\count( \IPS\core\FrontNavigation::i()->subBars( $preview ) )}}ipsNavBar_noSubBars{{endif}} {{if !$preview}}ipsResponsive_showDesktop{{endif}}'>

و با کد زیر جایگزین کن:

<nav class='{{if !\count( \IPS\core\FrontNavigation::i()->subBars( $preview ) )}}ipsNavBar_noSubBars{{endif}} {{if !$preview}}ipsResponsive_showDesktop{{endif}}'>

البته یک رو استایلش باید کار کنی. 

من این کدو برای خودم زده بودم که بعدا بدلایلی مجبور شدم تغییر بدم. 

اگه مشملی داشت بگو تا برات فیکسش کنم

[MR-K4SR3]

در ۱ ساعت قبل، Arash.Ranjbar گفته است :

کدهای زیر رو تو custom.css قرار بده

#ipsLayout_header nav {
  background:#000;
  position: relative;
  flex-grow: 8;
  font-weight: 600;
  margin: 0 5px;
}

#ipsLayout_header nav::after {
  height: 0;
}

.ipsNavBar_primary {
  margin-bottom: 0;
}

.ipsNavBar_primary > ul > li {
  position: relative;
  margin: 0 5px;
}

.ipsNavBar_primary > ul > li > a {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
  position: relative;
  text-decoration: none;
  background: linear-gradient(45deg, var(--secondaryColor), var(--mainColor)) bottom / 0 .1em no-repeat;
  transition: 200ms background-size;
  padding: 0px 10px;
}

.ipsNavBar_primary > ul > li > a:hover {
  background-size: 100% .1em;
}

.ipsNavBar_active .ipsNavBar_active__identifier {
  display: none;
}

.ipsNavBar_primary > ul > li.ipsNavBar_active > a:first-child::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid var(--mainColor);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.ipsNavBar_primary > ul > li.ipsNavBar_active > a:first-child{
  background-size: 100% .1em;
}

.ipsNavBar_secondary:before {
  content: '';
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--secondarynavbar-bg);
  z-index: 9999999;
  position: absolute;
  top: -10px;
  left: 16px;
  width: 0;
  height: 0;
}

.ipsNavBar_secondary {
  background-color:#0000;
  min-width: 215px;
  top: calc(100% + 12px);
  border-radius:#000;
  opacity: 0;
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}

.ipsNavBar_secondary::after {
  content: '';
  top: -12px;
  position: absolute;
  height: 12px;
  width: 100%;
  display: block;
}

.ipsNavBar_primary > ul > li:hover > .ipsNavBar_secondary {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: bubble 200ms;
}

@keyframes bubble {
  0% {
    transform: translate(0, 50px);
  }

  50% {
    transform: translate(0, -20px);
  }

  100% {
    transform: translate(0, 0);
  }
}

.ipsNavBar_secondary > li {
  float: none !important;
  display: block;
}

.ipsNavBar_secondary > li > a {
  float: none;
  text-align: left;
}

حالا تو تب فایل فایل navbar  رو پیدا کن و دنبال کد زیر بگرد

<nav data-controller='core.front.core.navBar' class='{{if !\count( \IPS\core\FrontNavigation::i()->subBars( $preview ) )}}ipsNavBar_noSubBars{{endif}} {{if !$preview}}ipsResponsive_showDesktop{{endif}}'>

و با کد زیر جایگزین کن:

<nav class='{{if !\count( \IPS\core\FrontNavigation::i()->subBars( $preview ) )}}ipsNavBar_noSubBars{{endif}} {{if !$preview}}ipsResponsive_showDesktop{{endif}}'>

البته یک رو استایلش باید کار کنی. 

من این کدو برای خودم زده بودم که بعدا بدلایلی مجبور شدم تغییر بدم. 

اگه مشملی داشت بگو تا برات فیکسش کنم

مرسی چشم