Icon colour in menu

BB Theme
1

I have put a couple icons in my menu. An Arrow down and a house for the home page.

I have tried to work out how to make them stay white when in hamburger menu mode, is there a way i can achieve this please?

Also is there a way I can put the text “MENU” next to the hamburger icon?

http://www.focusma.co.uk/

2

Hey Brian,

To make those down arrows become white, try using the CSS snippet below and see if it works.

.fl-page-header .fl-page-nav-container .fa.fa-sort-desc {
	color:#fff;	
}

For your second question, try adding the code below into your functions.php file. I’d suggest that you use a Child Theme for this one.

function my_nav_toggle_text( $text ) {
    return 'MENU <i class="fa fa-bars"></i>';
}
add_filter( 'fl_nav_toggle_text', 'my_nav_toggle_text' );

Thanks!

KC

3

Thanks KC

2 points.

First one the arrows are now in white, great. But when I choose another page the HOME button which is a house icon stays black.

I used this in the menu settings in the navigation label “<i class=“fa fa-home fa-lg”></i>”

Second point the “MENU” text is now overlaping my log so i need it to be underneath the hamburger lines.

Cheers

4

Hey Brian,

This CSS code below should fix the color issue for the house icon.

.fl-page-header .fl-page-nav-container .fa.fa-home.fa-lg {
	color:#fff;	
}

.fl-page-header .fl-page-nav-container .navbar-nav > li.current-menu-item > a .fa.fa-home.fa-lg {
	color:#000;	
}

As for your second question, may I know where is the overlapping “MENU” text? I couldn’t find it on your menu.

Thanks!

KC

5

Thanks again KC

Here is the menu text http://postimg.org/image/treetj6px/

6

Hey Brian,

Replace the function I gave you earlier with this one. This should push the word “MENU” to the bottom and also, I’ve given it a class name “menu-capt” for your convenience to style it.

function my_nav_toggle_text( $text ) {
    return '<i class="fa fa-bars"></i><div class="menu-capt">MENU</div>';
}
add_filter( 'fl_nav_toggle_text', 'my_nav_toggle_text' );

Thanks!

KC

7

The Icon colour now doesnt work at all, the arrow and the house icon just stay black.

And the menu is still overlapping the log, perhaps there is a way of having the menu text and icon centered below the logo?

8

PS and have the logo centered as well?

9

I’ve just also noticed that if you go into the text editor the tabs are all over sized.

Is this something to do with the TEXT MENU issue?
http://postimg.org/image/treetj6px/

http://postimg.org/image/mvho474td/

10

[Content Hidden]

11

Can you please have a look at the above message please guys

12

Hey Brian,

I’ve just checked your Website and I’ve fixed some custom CSS issue there. The oversized tabs in your text editor are caused by the plugin CSS Hero. Could you please check on that? Meanwhile, I’ll see what I can do with the logo and the menu text.

Thanks!

KC

13

Hey Brian,

Try the CSS snippet below and see if it’s what you’re looking for. It should align the menu and the logo to the center. You’ll notice the menu on a different location, I think that’s the only way to achieve that.

.fl-page-nav-bottom.fl-page-nav-toggle-icon .fl-page-nav .navbar-toggle {
position: relative;
width: 100%;
margin: 0px auto;
right:0px;
margin-bottom:20px;
}

@media only screen and (max-width: 767px) {
.fl-page-nav-bottom.fl-page-nav-toggle-icon .fl-page-header-logo {
    text-align: center;
    margin-right: 0px;
}
}

Thanks!

KC

14

Hi KC

Thats sorted the menu problem, looks great.

The tab problem is still there though!!

15

Hey Brian,

Just sorted that out for you. It looks like some custom CSS stylings from CSS Hero is causing that issue. It’s all good now, let us know if you need anything further.

Thanks!

KC

16

[Content Hidden]

17

Hey Brian,

I’ve just tested your Website on my mobile device (Android on Firefox) and it seems to work just fine. Could you try refreshing a few times on your Mobile device browser to clear the cache? Let us know how it goes.

http://imgur.com/reGttXR

Thanks!

KC