Boost Hamburger icon appears different

Boost Hamburger icon appears different

by T K -
Number of replies: 7

Hi all,

I have just upgraded from 3.4 to moodle 3.5.
My previous Boost Campus theme does not work, so I have to use the Boost theme to customise it as per our requirement.

In the midst of making changes, I realise the hamburger button is not appearing complete, like this:



my current css settings is:

.btn-light {

    color: #e40134;

    background-color: #fff;

    border-color: #58585b;

}


How do i bring back this hamburger icon?






Average of ratings: -
In reply to T K

Re: Boost Hamburger icon appears different

by Leon Stringer -
Picture of Core developers Picture of Particularly helpful Moodlers

The hamburger icon is loaded from the Font Awesome file included with Moodle. Using your browser's developer tools (for example: Network Monitor in Firefox) can you see this file being loaded successfully when the page loads?

Network Monitor in Firefox showing fontawesome-webfont.woff being successfully downloaded with 200 OK response.

If the Font Awesome file is blocked by the browser then this reply describes one possible cause and solution.

In reply to Leon Stringer

Re: Boost Hamburger icon appears different

by T K -
My site is not a HTTPS, it is HTTP. This was working fine earlier today, after the upgrade, but after i meddled into the CSS doing my site design it suddenly became weird like this.
In reply to T K

Re: Boost Hamburger icon appears different

by Leon Stringer -
Picture of Core developers Picture of Particularly helpful Moodlers

It doesn't matter if the site is HTTP if upgrade-insecure-requests is enabled on the web server (Apache, Nginx, etc.). But if theme/font.php/boost/core/…/fontawesome-webfont.woff2?v=4.7.0 is loading with 200 OK then that's not the problem.

I doubt that CSS change is causing the problem but obviously you could try removing that. Was this added to Raw SCSS under Site administration ▸ Appearance ▸ Themes ▸ Boost, Advanced settings tab?

It's worth purging caches to see if that resolves the issue.

Also check the browser's console to see if there are any errors on the page.

Average of ratings: Useful (1)
In reply to Leon Stringer

Re: Boost Hamburger icon appears different

by T K -
After i removed my custom CSS (site admin - appearance - theme - Boost - advanced settings, it is back:



These are my custom settings:
//Additional CSS
.bg-white {
    background-color: #e40134 !important;
}

a {
    color: #0275d8;
}

.flex-wrap {
    flex-wrap: no wrap;
}

.btn-light {
    color: #e40134;
    background-color: #fff;
    border-color: #58585b;
}

.fa {
display:none;
}

.btn-light:hover {
    color: #fff;
    background-color: #bbb;
    border-color: #3f3f41;
}

.usermenu .login a {
    color: #212529;
}

i realise .fa display none is the one causing the problem. How do I remove the fontawesome from My Progress & Site admin without affecting my hamburger?
In reply to T K

Re: Boost Hamburger icon appears different

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers
Using .fa {display: none;} will remove ALL Font Awesome icons across the whole site - which is not a good plan.

You need to be more specific targeting the CSS selector.

On the assumption that "My Progress" is actually the Dashboard...

/* REMOVE ICON FROM DASHBOARD LINK IN NAV DRAWER */
[data-key="myhome"] .media-left {display: none;}

/* REMOVE ICON FROM SITE ADMIN LINK IN NAV DRAWER */
[data-key="sitesettings"] .media-left {display: none;}
Average of ratings: Useful (2)
In reply to Jon Bolton

Re: Boost Hamburger icon appears different

by T K -
HI Jon, Thanks so much, this is really helpful.
May I ask you several things more? I have been working on these settings but some of these listed here I cant seem to find the identifier to change:

1) When I click on this user profile menu, the black & white outline appears this. How can I remove this black and white outline?


2) How can I align this breadcrumb properly in the box?



3) When I hover onto this 'unenrol me' it appears fully dark gray. 







I am able to change the font color but can not remove this gray color when hover:




4) How to remove the black outline? It appear when I click on the gear:


Really appreciate your help.
Thanks!
In reply to T K

Re: Boost Hamburger icon appears different

by T K -
I really hope someone can help me out there.
Thanks.