Archived topic

Position menu icons above menu items

6 replies · Started by Greg on July 18, 2017

Viewing posts 1–7 of 7

July 18, 2017 at 12:10 pm #351310

Hello,
I have just started using this theme. Great job, its very nice!

I would like to place menu icons above each menu item. I have placed a top border on the primary navbar. I would like the icons to sit on top of this border.

I can only seem to place images on the left or the right.

Any assistance would be great.

I am trying to achieve this type menu look.

Cheers
Greg

July 18, 2017 at 12:13 pm #351312

Sorry, this is the website I am working on.

July 18, 2017 at 6:52 pm #351432

You can try adding your Font Awesome icons into the navigation label like this:

<span class="menu-icon"><i class="fa fa-facebook"></i></span>

Using fa-facebook as an example.

Then add this CSS:

.menu-icon {
    display: block;
    padding-bottom: 3px;
}

Let me know if this helps or not :)

July 18, 2017 at 7:50 pm #351443

Thanks for the prompt response Tom,
it almost works. I need the icon to sit above the top border of the primary nav bar.

Here the Site

Cheers
Greg

July 19, 2017 at 12:39 am #351502

Maybe try adjusting your CSS to this:

.menu-icon {
    display: block;
    padding-bottom: 3px;
    text-align: center;
    position: absolute;
    top: -30px;
    left: 50%;
    margin-left: -10px;
}

July 19, 2017 at 10:46 am #351790

Magic!

Cheers
Greg

July 19, 2017 at 11:45 am #351822

Awesome :)

This archived topic is closed to new replies.

Start building better websites today.