CSS Snippets – BizTek ToolBox Knowledge Base

Theme CSS Reference

If you take a look in your browser web inspector of choice, you’ll notice that BizTek Builder doesn’t make use of the typical style.css file that is required of all WordPress themes. That’s because all of BizTek Builder’s styles are generated dynamically from LESS files each time you click Save Settings on the theme settings page. If you need…

Position Left Sidebar Below Content in Mobile

If you use BizTek Pro Theme and enable the Primary Sidebar on the left or right in your blog posts or on static pages, the mobile view changes as follows: Sidebar on the left: in mobile view, sidebar is displayed above content. Sidebar on the right: in mobile view, content is displayed above sidebar. If…

Center the Nav Menu with Nav Bottom Layout

By default, when you choose Nav Bottom header layout, the navigation menu is left-aligned. If you want to center it, you can add the following CSS rules to Customize > Code > CSS Code. .fl-page-nav-bottom { text-align: center; } .fl-page-nav-bottom ul.nav { float: none; } .fl-page-nav-bottom ul.nav > li { display: inline-block; float: none; }…

Add Underlines to Link Text (BizTek Pro Theme)

By default, the BizTek Pro Theme underlines link text in content only when you mouse over it, and not at all in the navigation menu. Here’s how to add default underlining of link text in your content, your nav menu and header, or both, with some simple CSS. To add underlines to all links in…

Insert Sitewide CSS or JavaScript Code

You can add custom code that will be inserted on every page in your site. Depending on which category you choose in the Customizer, the code will be inserted in one of the following locations: Within <style> tags Within <script> tags Within the <head> tag Immediately after the opening <body> tag Immediately before the closing…

Change Menu Link and Icon Colors on Small Devices

If you use the BizTek Pro Theme, you can use a CSS rule to customize the color of the hamburger icon or MENU text on small devices. You can also add custom CSS to customize the link colors in the mobile menu, which expands when you click the hamburger icon or menu text. Tip: See the…

Hide the Header Nav Menu

All of the BizTek Pro Theme’s header layouts include a nav layout and ask you to associate a menu. You can easily show the header area and hide the nav area with the following CSS. Go to Appearance > Customize > Code > CSS Code. Copy and paste in the following CSS code, then click Save…

Merge Page Content Into the Header

It’s currently popular in web page design to merge the page header with content in the same background image or background video, like the example in this screenshot. Figure 1: Merged Nav Right header and content on a large screen Here’s one easy way that you can do this with BizTek Pro Theme and BizTek…

Theme Style Settings in Customizer and CSS

The following diagram of a boxed layout shows each of the BizTek Pro Theme’s header, content, footer, and page areas mapped to Customizer setting and CSS class. Note: This diagram also applies to full-width layout, but the page background color (set at General > Background) will only appear in a thin band at the bottom of the…