Archived topic

Navigation - lightweight social icons

3 replies · Started by BarnaB on January 3, 2017

Viewing posts 1–4 of 4

January 3, 2017 at 6:40 am #260243

Hi Tom,

So here is the question of the day :) Found this tutorial and it works great, but how can i make sure the search icon is the last item in the row ? :)

Thank you

January 3, 2017 at 8:36 am #260281

Hi there,

You would have to hide the default search item:

.main-navigation .search-item {
    display: none;
}

Then add your own custom link in the menu with these settings:

Navigation Label/Link Text: <i class="fa fa-fw fa-search" aria-hidden="true"></i><span class="screen-reader-text">Search</span>

Custom Classes: search-item menu-item-float-right custom-search-item

Then add this CSS:

.main-navigation .search-item.custom-search-item {
    display: block;
}

Then you can order it however you like :)

January 3, 2017 at 9:02 am #260285

awesome ! Thank you :)

January 3, 2017 at 7:02 pm #260432

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.