Theming WP Bootstrap 4

On this site I am (at the time of writing) using the WP Bootstrap 4 theme. The free version as I still haven't figured out what the use of the paid version is for me. Cest la vie. Basically I have based the colour scheme off the KDE breeze theme, used the Blog Homepage option in the customisations and added a couple of links.

I have changed a couple of things in CSS though and that is what I want to record here.

Remove site-info

Firstly I removed the "Bootstrap 4 WordPress Theme | Theme Name: WP Bootstrap 4." link from the bottom of the page. I am happy to use the theme and advertise it, but not to have someone else's link splashed over my website. There is a common fix for this in Wordpress.

.site-info{display: none;}

Remove menu icon on small screens

The next was to remove the menu icon on small screens. I wasn't using a proper menu at first as the category menu widget was good enough but even though I wasn't using a menu the menu icon would appear on screen sizes smaller than 800px. This can be solved by using,

.navbar-toggler {    display: none;}

It does change where your site title sits on smaller screens but i quite liked that. I have stopped using this CSS now anyway as I now have a basic menu going on for smaller screens which leads to the next piece of CSS.

Hide menu on larger screens

Since I now wanted to use a menu on smaller screens but stay with the Category Menu widget for larger screens I wanted to hide the navigations menu when it was on a larger screen. This was done using a media query,

@media screen and (min-width: 800px) {    .navbar-nav{    display: none;}}

Hide the slider on smaller screens

I have tried to get some support on this as I think it is a bug but the posts slider on smaller screens has no button, no excerpt and no click functionality. It's essentially useless except for looking pretty. To hide it on small screens uses another media query,

@media screen and (max-width: 800px) {    #wp-bp-posts-slider {        display: none;    }}

Change the Older Posts button background on Home Page

After changing the site background to a background image I noticed that the Older Posts button wasn't visible enough so I changed the background colour to bring it out more.

.btn-outline-primary {    background-color: #f7f7f7;}

Style the widget Category Menu

The category menu widget wasn't quite how I wanted it so I removed the title, changed the default squares to pointers and removed the borders.

.widget-title {	display: none;}.sidebar-1-area .widget ul li,  .widget ul {    list-style: disclosure-closed;}.border-bottom {    border-bottom: 0px     !important;}

Remove Category from category searches.

Whenever I clicked on the Category Menu it would take me to the category but the heading of the page would be Category: Internet or something like that. To remove the word Category I placed this into my functions.php file.

function prefix_category_title( $title ) {    if ( is_category() ) {        $title = single_cat_title( '', false );    }    return $title;}add_filter( 'get_the_archive_title', 'prefix_category_title' );