[ahurlburt53Participant]

Please help with css to make navbar menu like this picture http://i.imgur.com/fMui2B1.png

Site I am working on http://internogrow.com/

[ThaiModerator]

Hi There,

Thanks for writing in!

Upon checking your website, I can see that it’s under construction.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[ahurlburt53Participant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

Try adding following CSS under Appearance > Customize > Custom > CSS:

.x-navbar {
    border: 0;
    background-color: #333;
}
.x-navbar-inner {
    min-height: 54px;
}
body.x-navbar-fixed-top-active .x-navbar-wrap,
.x-navbar .desktop .x-nav > li > a {
    height: 54px;
}
.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-overflow: ellipsis;
  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);
  padding-top: 20px !important;
  color: #878787 !important;
}
.x-navbar .x-nav > li > a:hover {
  color: #fff !important;
}

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

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

.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 !important;
  box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.065), inset -1px 0 0 0 rgba(255, 255, 255, 0.065) !important;
}

.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) !important;
}

.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) !important;
}

Hope it helps.

[ahurlburt53Participant]

Nice work ty! How can I make the main color of navbar text this color #f8d237. which part of the css do I need to change

[ThaiModerator]

Hi There,

You can edit following code:

.x-navbar .x-nav > li > a {
  color: #878787 !important;
}

Hope it helps.

[ahurlburt53Participant]

TYTYTY

[ThaiModerator]

You are most welcome.

[ahurlburt53Participant]

which part of the css code removes the vertical bars?

[ThaiModerator]

Hi There,

Try adding following CSS:

.x-navbar .desktop .x-nav > li:first-child > a:hover,
.x-navbar .desktop .x-nav > li:first-child.current-menu-item > a
.x-navbar .x-nav > li:first-child > a,
.x-navbar .x-nav > li > a {
border-right: none !important;
box-shadow: none !important;
}

Hope it helps.

[ahurlburt53Participant]

it worked but have just one vertical bar that did not work? Strange http://i.imgur.com/EUlOGGX.png

http://www.tampabaywebsitedesigner.com/

[ChristopherModerator]

Hi there,

Please add this :

.x-navbar .desktop .x-nav > li:first-child > a:hover, .x-navbar .desktop .x-nav > li:first-child.current-menu-item > a{
border-left:none !important;
}

Hope it helps.

[ahurlburt53Participant]

Were in business tytytytytyt

[ThaiModerator]

You’re most welcome 🙂

[ahurlburt53Participant]

Still there for this page http://www.tampabaywebsitedesigner.com/tampa-online-marketing-services/

[Author]

Posts