Home button icon size and margin

booddha

Hello,

I followed steps on article on this forum to change the "home" button menu text to an icon.
It worked, but the site of the menu button is not the same as other menu button of the menu bar.

Mega menu configuration :
look image, the text as change and the size also...?

Menu CSS link :
icon-home text-hide

Then i took a code that i found here on the forum:
.text-hide {font-size: 0 !important;} .text-hide::before {font-size: 23px !important;}

an put it into the custom.css file.

I also try the add, this margin problem in the menu tool bar with this :
.text-hide {padding: 0px 0;}

but it does not seems to works... was just a try : ), because i don't understand the code...

How can i fix that ?
Thanks

pavit

Hi booddha

You can try with this solution

1) Remove from your custom.css your code and add below code

.navbar-default .navbar-nav > .item-home {
  text-indent: -9999em;
  position: relative;
  padding-left: 0;
  padding-right: 0;
  width: 48px;
  text-align: center;
}
.navbar-default .navbar-nav > .item-home .fa {
  text-indent: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  line-height: 48px;
  font-size: 18px;
  margin: 0;
}
.navbar-default .navbar-nav > .item-home .dropdown-menu ul li a {
  text-indent: 0;
}

2) Go to your megamenu settings and set the home menu item as below

Also remove your style added in your menu item

Hope it helps

booddha

Hello Pavit,
Thanks for the code. But it does not seems to work... I have the text "accueil" instead of the fa-fa home icon...

booddha

Sorry, my mistake, it worked !
I changed in the mega menu The "Home page", which in my case is a page a do not use.

I use a main FR-page for the "home page", i paste the fa fa-home text and icon-home text and i worked fine after i change with your code in the custom-css file !

Thank you very much, this is great.

Can I do the same with the icon of the "search menu tool" ?

paulus1031

I'm not quite sure what you mean with "search menu tool"

Can you add a screenshot or a link to the page in question?

Cheers
Paul

booddha

Hello Paulus1031,

In the Menu bar (www.massage-lausanne.ch), i created a Search menu page. And there was the text and the icon.

With Pavit's code, it work fine, but i needed to change in the mega-menu configuration from "icon-search" to "fa icon-search". And it work fine, there is only the search icon without text : )

Thank you both !

pavit

booddha there is only the search icon without text

If i understood correctly you want something like this ?

If yes than it is easy

add to the same code i posted in previous post in custom.css but change from item-home to item-search

.navbar-default .navbar-nav > .item-search {
  text-indent: -999em;
  position: relative;
  padding-left: 0;
  padding-right: 0;
  width: 48px;
  /* text-align: center; */
}
.navbar-default .navbar-nav > .item-search.fa {
  text-indent: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  line-height: 48px;
  font-size: 18px;
  margin: 0;
}
.navbar-default .navbar-nav > .item-search .dropdown-menu ul li a {
  text-indent: 0;
}

Rememberr to change in megamenu the item-search from item-home for search menu item , in this way you can customize this item as you wish

Example :

If you want to have also text then change

.navbar-default .navbar-nav > .item-search {
text-indent: -999em;

.navbar-default .navbar-nav > .item-search {
text-indent: 1em;

Hope it helps

booddha

That's great, thank you, but does not work with the new code.

It worked fine with "item-home", in the search menu item, i don't know why.
See here :

massage-lausanne.ch

pavit

Hi booddha

You added wrong item name and wrong code in custom.css

It should be item-search and not item-home

Anyway i fixed everything now

Best regards

booddha

Yes I know the text was "item-home", but now, there is the texte "recherche" beside the icon and i don't want it ; )

Ok so I copied the first code texte you have written, and paste it, then changed "item-home" to "item search".

It was missing a "9" in text-indent: -999em; and there was some other littles changes, now it works,
Many thanks