Logo

Default Style

Logo can be used under the following form:


<a class="logo" href="">Logo Text</a>

If the logo is inside the header, it will have the following form:


<header class="header-section bhs header-sticky">
	<div class="header-content">
		<div class="ui container grid">
			<div class="header-item"></div>
			<div class="header-item">
				<a class="item logo" href="">Logo Text</a>
			</div>
			<div class="header-item"></div>
		</div>
	</div>    
</header>

Logo Type

Logo can be one of this types:

Text
Image
Image and text
Icon
Icon and text

Logo Text

Text Text


<a class="logo" href="">Logo Text</a>

<a href="" class="logo">
	<img src="assets/images/logo-mybiz.png" srcset="assets/images/logo-mybiz.png 1x, assets/images/logo-mybiz@2x.png 2x" alt="mybiz logo">
</a>

<a href="" class="logo">
	<img src="assets/images/logo-mybiz.png" alt="">
	<span>Text</span>
</a>

<a class="logo" href="">
	<i class="icon big icon-compass"></i>
</a>

<a href="" class="logo">
	<i class="icon big icon-compass"></i>
	<span>Text</span>
</a>

Customizing the logo

Theme logo can be customized by changing the following variables from logo.variables:

@logoHeight - logo height
@logoPadding - for left and right padding
@logoBackground - for background color
@logoColor - for logo text color
@logoFontFamily - for font family
@logoFontSize - for the font size (in px or em)
@logoFontWeight - for font weight
@logoBorderRadius - for the logo border radius shape

In our sample the values are:


@logoHeight: 44px;
@logoPadding: 10px;
@logoBackground: #fff;
@logoColor: #380BD1;
@logoFontFamily: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
@logoFontSize: 24px;
@logoFontWeight: 700;
@logoBorderRadius: 10px;

Round Style

Applying .rounded-sq class to the logo element, it will add border-radius. The value can be change from the @logoBorderRadius variable.

Logo Text


<a class="logo rounded-sq" href="">Logo Text</a>

Square Style

For a square logo, you can add the .square-sq class.

To have a circle shaped logo you need to apply .rounded-sq class and set @logoBorderRadius: 50%.


<a class="logo square-sq" href="">a</a>
<a class="logo square-sq rounded-sq" href="">
	<i class="icon big icon-compass"></i>
</a>

Header Transparent Option

If the header in which the logo resides has the .header-transparent option, you can use a separate logo when the header is in transparent state.

The logo image for the transparent state needs to have the class .logo-transparent like in this example:


<a href="" class="logo item">
	<img src="assets/images/logo-mybiz-transparent.png" srcset="assets/images/logo-mybiz-transparent.png 1x, assets/images/logo-mybiz-transparent@2x.png 2x" alt="mybiz logo" class="logo-transparent">
    <img src="assets/images/logo-mybiz.png" srcset="assets/images/logo-mybiz.png 1x, assets/images/logo-mybiz@2x.png 2x" alt="mybiz logo">
</a>