Need the settings for Menu

[rajmayer]

When I was buying the theme I really liked the website you guys have and the way the menu and all there. I thought this theme will be the same as this is my first WordPress theme ever after Joomla. But unfortunately, this was not the case. The settings you guys have are not what I was looking for or what I have seen.
I am super disappointed

[friech]

Hi Rajdeep,

Sorry if you feel that way, but would you mind to clarify which demo you’re referring to? If you import a demo, you’ll get the design/settings of that demo menu (except the menu items obviously). Please clarify what is the issue, and we will be happy to help you.

Cheers!

[rajmayer]

When i log onto https://theme.co/x/ i can see this website which i thought is the demo .I am very impressed with this and was expecting the same . I am sharing the webiste and the menu which i want settings for.

[nabeel]

Hi again,

Thanks for the screenshot, you can have a similar menu style using custom CSS, try adding the following code in the Theme Options > CSS:

/* Navbar */

.x-navbar-wrap {
  margin: 0 !important;
}

.x-navbar {
  left: 0;
  right: 0;
  border: 0;
  background-color: #333 !important;
}

.x-navbar .x-container {
  width: auto;
  max-width: none;
}

.x-navbar .x-brand {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 65px;
  margin: 0;
  padding: 9px 0 0;
  font-size: 32px;
  font-weight: 400;
  text-align: center;
  z-index: 10;
}

.x-navbar .x-brand:hover {
  color: #fff;
}

.x-navbar .x-nav {
  position: relative;
  padding-left: 65px;
}

.x-navbar .x-nav.left {
  float: left;
}

.x-navbar .x-nav > li {
  text-align: center;
}

.x-navbar .x-nav > li > a {
  overflow: hidden;
  border-right: 1px solid #171717;
  padding-left: 35px !important;
  padding-right: 35px !important;
  font-size: 14px;
  text-shadow: 0 -1px 0 #292929;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.065);
}

.x-navbar .x-nav > li > a > span {
  display: inline;
}

.x-navbar .x-nav.left > li.current > a {
  color: #fff;
}

.x-navbar .x-nav.left > li.current > a:hover {
  cursor: default !important;
}

.x-navbar .x-nav > li:first-child > a {
  border-left: 1px solid #171717;
  box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.065), inset -1px 0 0 0 rgba(255, 255, 255, 0.065);
}

.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > li.current-menu-item > a {
  box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.065);
}

.x-navbar .desktop .x-nav > li:first-child > a:hover,
.x-navbar .desktop .x-nav > li:first-child.current-menu-item > a {
  box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.065), inset -1px 0 0 0 rgba(255, 255, 255, 0.065);
}

.x-navbar .mobile .x-nav > li > a {
  border: 0;
  padding: 0.5em;
  box-shadow: none;
}

.x-navbar .mobile .x-nav > li > a:hover,
.x-navbar .mobile .x-nav > .current-menu-item > a {
  background-color: #444;
}

.x-btn-navbar.collapsed {
  text-shadow: none;
  color: #333;
  background-color: #555;
}

.x-btn-navbar,
.x-btn-navbar.collapsed:hover,
.x-btn-navbar.collapsed:focus {
  margin-right: 15px;
  text-shadow: none;
  color: #333;
  background-color: #777;
}

@media (max-width: 979px) {
  .x-navbar .x-brand {
    border-right: 0;
    box-shadow: none;
  }

  .x-navbar .x-nav {
    padding-left: 0;
  }

  .x-navbar .x-nav {
    width: 88%;
    margin-left: auto;
    margin-right: auto;
  }

  .x-navbar .x-nav.left {
    display: none;
    float: none;
    margin-bottom: -1.5em;
  }

  .x-navbar .x-nav > li {
    width: 100% !important;
  }
}

/* Navbar */

You can also have a similar menu style if you switch to Ethos stack (see the demo link http://demo.theme.co/ethos-1/)

Hope this helps!