Now Loading:
Modern, Minimal Navigation Design

Modern, Minimal Navigation Design

Info:
Posted March 11, 2021
, by tickyboom
Itttsss Baaacckkk! Can it be done with Beaver Builder? Well, can it? Let's find out!
🦁 Sections

So Pumped off the Crypto space and No 3rd party plugins.

I am beyond pumped about the Crypto web design space. I think the sites are hella bomb. They are usually modern, futuristic, techy, and have some nifty functionality. For this next series of CIBDWBB videos, we are going to be tackling Crypto sites. How spicy can we get?

Also, we are using no third-party plugins except for Microthemer. It's our wits and Beaver Builder against the world.

Simple Navigations with BB are hard.

Yea, we said it. Without the ability to have inline elements in BB's builder without stacking columns next to each other, it makes simple stacking hard in some instances. We have to re-write the functionality of BB with CSS to make this possible. It's not entirely problematic; it is more just annoying. But, code below for what we needed to do.

Here is the code we used to accomplish some reflexing!

.flex-left .fl-col-content {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	align-content: flex-start;
}

.flex-right .fl-col-content {
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

.logo-flex {
	width: 22px;
}

.join-flex {
	width: 172px;
	margin-right: 19px;
}

.sign-in-flex {
	background-image: linear-gradient(tickyboom, transparent, transparent);
	width: auto;
}

Type Change

A quick aside, but you will notice that I needed to change the HTML font size to better match our target site. That is some REM love there—a neat little tidbit to store away.

html {
	font-size: 16px;
}

Tame Those Buttons

We leveraged CSS because Beaver Builder bizarrely allows you to apply a gradient to a button but not control the gradient. That was a head-scratcher. We also manipulated the custom nav item we applied a span and class to.

Here is the code we used to manipulate the buttons / nav items

.sign-in-flex .fl-button-wrap a {
	background-image: linear-gradient(90deg, rgb(65, 30, 120), rgb(50, 17, 92));
}

.sign-in-flex .fl-button > .fl-button-icon-before {
	margin-right: 2px;
}

.sign-in-flex a:hover .fl-button-text {
	color: rgb(255, 255, 255);
}

.menu-dot a {
	letter-spacing: 1px;
	padding: 6px 14px 6px 14px;
	margin-left: 9px;
	border: 1px solid rgb(59, 57, 73);
	border-radius: 50px;
}

.dotty {
	background-color: rgb(230, 230, 230);
	width: 6px;
	height: 6px;
	padding-right: 0;
	margin-right: 5px;
	margin-bottom: 2px;
	border-radius: 10px;
	display: inline-block;
}

Regarding our tools

I am super happy with the tools we used in this episode, as they have stood the test of time. Sip Color Picker, Microthemer, and Pixelsnap. Still in the arsenal!

Tools we used

Music Bumpin In The Background

Thanks for reading, wanna share with your friends?

Get infrequent design email updates!