Docs

[Lely]

Hi There,

Please update this custom CSS:

body .x-navbar li#menu-item-18062 a > span,
body .x-navbar li a.mylllmenu {  
    color: #fff !important;
    border-color: #0030aa;
    background-color: #0645a0;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    box-shadow: 0 0.25em 0 0 #0030aa,0 4px 9px rgba(0,0,0,0.75);
}
body .x-navbar li#menu-item-18062 a:hover > span,
body .x-navbar  .desktop .x-nav>li a.mylllmenu:hover {  
    color: #fff;
    border-color: #0074db;
    background-color: #0099d4;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    box-shadow: 0 0.25em 0 0 #0074db,0 4px 9px rgba(0,0,0,0.75);
}
body .x-navbar li#menu-item-18062 a:hover {
    box-shadow:none;
}

To this:

body .x-navbar li#menu-item-18062 a, 
body .x-navbar li a.mylllmenu {
    color: #fff!important;
    border-color: #0030aa;
    background-color: #0645a0;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    box-shadow: 0 0.25em 0 0 #0030aa,0 4px 9px rgba(0,0,0,0.75);
}
body .x-navbar li#menu-item-18062 a:hover,
body .x-navbar .desktop .x-nav>li a.mylllmenu:hover {
    color: #fff;
    border-color: #0074db;
    background-color: #0099d4;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    box-shadow: 0 0.25em 0 0 #0074db,0 4px 9px rgba(0,0,0,0.75);
}

If this is not what you want to achieve, please do give us screenshots.

[gignnn]

Hello,

That is getting really close, but please take a look at the screenshot that I have provided of my homepage after applying your code. As you can see, the buttons extend to the edges of the navigation bar.

Please take a look at the buttons in my topbar as an example of the effect I am trying to achieve. I want the login and register buttons to emulate the “Request Property Evaluation”, “Submit 1031 Requirement” and “Join Distribution List” buttons that you see in the topbar.

Sorry for the inconvenience, and I can’t tell you how much I appreciate you spending so much time on this. I promise I am near the end of my litany of questions, LOL.

Mike

[Lely]

Hello Mike,

The screenshot didn’t upload, but try updating previous suggested CSS to this:

body .x-navbar li#menu-item-18062 a>span,
body .x-navbar li a.mylllmenu {
    color: #fff!important;
    border-color: #0030aa;
    background-color: #0645a0;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    box-shadow: 0 0.25em 0 0 #0030aa,0 4px 9px rgba(0,0,0,0.75);
    display: inline-block;
    padding: 12px;
    margin-top: -12px;
    border-radius: 0.225em;
}
body .x-navbar li a.mylllmenu {
    height: 34px;
    margin-top: 26px;
    padding-top: 11px;
}
body .x-navbar li#menu-item-18062 a:hover>span,
body .x-navbar .desktop .x-nav>li a.mylllmenu:hover {
    color: #fff;
    border-color: #0074db;
    background-color: #0099d4;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    box-shadow: 0 0.25em 0 0 #0074db,0 4px 9px rgba(0,0,0,0.75);
}

See attached screenshot of result.

[gignnn]

Hi Lely,

Thanks for the quick reply! Well, I think we are getting very close here, but I am still having issues with the “Log In” button. As you can see, it still appears to be extending to the top and bottom of the nav bar after updating the code. This might be complicated by the fact I am using the “My Login/Logout” plugin (Version 2.4 by Nagarjun Sonti) on my site.

That screenshot you uploaded is EXACTLY how I want it to look.

Thanks again for all your help.

Mike

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

body .x-navbar .desktop .x-nav>li>a.mylllmenu {
    padding-top: 12px;
    padding-bottom: 12px;
    height: auto;
    margin-top: 25px;
}

Hope that helps.

[gignnn]

Thank you! This is really coming together. Just a couple more minor things:

(1) Can you show me how to decrease the height of these buttons so that they are the same height as the buttons in the topbar?

(2) As you can see in the screenshot attached, additional css rules need to be set for this “Login” button when the screen is narrowed and the responsive menubar rules take over.

Once again, I can’t thank you enough for your attention to this customization.

Mike

[Paul R]

Hi Mike,

You can add this under Custom > Edit Global CSS in the Customizer.

body .x-navbar li#menu-item-18062 a>span,
body .x-navbar li a.mylllmenu {
    padding: 0.718em 1.143em !important;
}

@media (max-width: 979px) {
     body .x-navbar li a.mylllmenu  {
          box-shadow:none;
          height: 51px;
    text-shadow: none;
    color: #272727 !important;
     }
  body .x-navbar li a.mylllmenu:hover  {
color: #0645a0 !important;
}
}

Hope that helps.

[gignnn]

Thank you Paul for the quick response. We are very, very, very close here, lol. Please take a look at my homepage now at http://nnnpropertiesgroup.com.

As you can see, everything looks good, but the Login button’s position is out of wack both on the normal navbar, as well as on the condensed mobile navbar. I attached a screenshot for your reference.

Thanks again for your team’s help on this!

Mike

[Christopher]

Hi there,

Please update following codes :

body .x-navbar .desktop .x-nav>li>a.mylllmenu {
    padding-top: 12px;
    padding-bottom: 12px;
    height: auto;
    margin-top: 25px;
}

body .x-navbar li#menu-item-18062 a>span, body .x-navbar li a.mylllmenu {
    padding: 0.718em 1.143em!important;
}

To :

body .x-navbar .desktop .x-nav>li>a.mylllmenu {
    padding-top: 12px;
    padding-bottom: 12px;
    height: auto;
    margin-top:30px;
}

@media (min-width:979px){
body .x-navbar li#menu-item-18062 a>span, body .x-navbar li a.mylllmenu {
    padding: 0.718em 1.143em!important;
}
}

Hope it helps.

[gignnn]

That solved it! I can’t thank you guys enough for going above and beyond to help me. Your customer service is ridiculously good, as is the product. I will get all my fellow real estate brokers to use your theme in the event they come to me for website advice!

Mike

[gignnn]

I had another question for you guys that should be easy to solve. For the time being, I removed the blue line that appears when you temporarily hover over a navbar menu item, and appears in a fixed state when you click on one using the following code:

.x-navbar .desktop .x-nav>li>a:hover,.x-navbar .desktop .x-nav>.x-active>a, .x-navbar .desktop .x-nav>.current-menu-item>a {
box-shadow: inset 0 0px 0 0 #0645a0;
}

.x-navbar .desktop .x-nav>li>a:hover,.x-navbar .desktop .x-nav>.x-active>a, .x-navbar .desktop .x-nav>.current-menu-item>a {
box-shadow: inset 0 0px 0 0 #0645a0;
}

However, in an ideal world, I would like this element to appear on all of my navbar links, with the exception of the “Register” button. Can you show me how to tweak the code above so that it only isolates this blue line element for the “Register” button in my navbar?

Thanks again,

Mike

[Joao]

Hi Mike,

Please remove the code you used to remove the blue line above every item and add the following code to Appereance Customizer Custom CSS instead:

 .x-navbar li#menu-item-18062 a>span,  .x-navbar li a.mylllmenu {
box-shadow: none !important;
}

Hope that helps and thanks for the kind words above we appreciate it 🙂

Let us know if you need further help,

Joao

[gignnn]

Thank you very much for your response Joao. Unfortunately, after clearing the cache via the W3 plugin, this appears to have eliminated the 3D aspect of the buttons, and the blue rectangle still appears over the “register” button when I hover over it. I have left the updated code in my customization section for your review. Please let me know how to tweak this further if you get the chance.

Thanks again!

Mike

[Paul R]

Hi Mike,

Please try this code instead.

body .x-navbar .desktop .x-nav>li.menu-item-18062 a:hover,
body .x-navbar .desktop .x-nav>li.current_page_item.menu-item-18062 a {
   box-shadow:none;
}

Hope that helps.

[gignnn]

Perfect, thank you!!

[Author]

Posts