Docs

[giveitlegs]

I need some help with two things pertaining to my navigational menu.

1 – My submenu items appear to be way off in position right now. Not sure why.

2 – I’d like to get rid of the little down arrow item that appears ext to the little images above my menu items.

Please see screenshot –> http://screenpresso.com/=TxGEd

Many thanks!

Cheers

[Rahul]

Hey There,

We couldn’t see any Screenshot here as we only allow max file size 512 KB. Kindly notice that. You can take help from other photo uploading sites and can link a URL here.

Thanks for understanding!

[giveitlegs]

Sure thing. URL: http://gofitfarm2.wpengine.com/

I have attached a screenshot reduced in size…

Many thanks. 😉

[Rahul]

Hey There,

Try the following custom CSS :

img {
  border:0;
  height:auto;
  max-width:0;
  vertical-align:middle;
}

Hope that helps!

[giveitlegs]

Hmm. Actually it did not. I applied the CSS code just now, and sub menus items still look like this now:

All it seemed to do was remove all the small icons next to menu items…

[giveitlegs]

Oh, and also, when I applied it… it made my central badge image disappear from the middle of the screen also. :/

[Lely]

Hi There,

Please try using this custom CSS:

.x-navbar .desktop .x-nav > li ul {
    top: 200px;
}
.x-navbar .desktop .x-nav li>a>span:after {
    content: "" !important;
}

Hope this helps.

[giveitlegs]

Oh wow! that totally did it! You’re my hero! 😉

I don’t suppose you could help me get rid of the white background of the submenu, and just center ‘Weight Loss’ (or any submenu item for that matter) under the main menu item?

Your support is sooooo awesome! Thanks!

[giveitlegs]

Sorry, here’s the screenshot…

[Joao]

Hi There,

Please add the following CSS to appereance > Customizer > Custom > CSS

.masthead-stacked .x-navbar .desktop .sub-menu {
  
    background: none;
    border: none;
}

And the following code to Appereance > Customizer > Custom > Javascript

jQuery(function($){
$( ".x-nav ul.sub-menu" ).each(function() {     
      var $submenuwidth = $(this).width(); 
      var $parentwidth = $(this).parent().width();     
      var $diff = -Math.round(($submenuwidth  -   $parentwidth)/2);     
      $(this).css("right",$diff);
});
});

Hope that helps

Joao

[giveitlegs]

Dude you rock! the background is gone! Hooray!

The submenu text still appears to be aligned to the right though… any thoughts on how to center it?

[Lely]

Hi There,

Please try removing the Javascript code on the previous reply. Then also add the following CSS:

.desktop .sub-menu {
    min-width: initial;
}
.desktop .sub-menu a {
    padding: 0.5em 1.1em;

See attached screenshot.

[giveitlegs]

That seems to have centered it! Oh gosh, I’m really pressing my luck here, but just one more thing about it… since I have a ‘sticky header’ that shrinks to the top when I scroll, I just noticed that when I mouse over a menu item WHILE it’s sticky and shrunk at the top, that the sub menu item appears waaaayyyy down from it… any tweak to fix that? (I would even settle for suppressing sub menu items from appearing at all while it’s shrunk, either or…)

screenshot.

[giveitlegs]

Oh also, just figured I’d mention that I did use your awesome previous code to move it to 130px and not 200px (because I bumped my entire menu area up a bit), but the submenu issue when the header is in sticky mode still exists. :/

so now your previous code snippet looks like this in the CSS:

.x-navbar .desktop .x-nav > li ul {
    top: 130px;
}

(and it works like a dream… 😉 thanks a million again)

Let me know if you happen to know a fix for the other issue.

cheers

[Rue Nel]

Hello There,

Thanks for the updates! To resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li ul {
    top: 80px;
    background: url(wp-content/uploads/2016/08/Fit-Farm-Header-Background-Solid.png) repeat-x center center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

Please let us know if this works out for you.

[Author]

Posts