Creating a Sticky Top Bar With CSS Flex Design: An Example Using Code Pen

Introduction

I created a simple guide on creating some basic call-to-action buttons using the Gutenberg block editor and Code Pen. In that article, I introduced Code Pen. Code Pen is a great way to use front-end languages, HTML/CSS/JS to write some basic widgets that you can use in the block editor. I have another pen to share with you. This time, I created a sticky top bar using flex design in CSS. So in this article, I will talk about both a sticky top bar and flex design.

What is a Sticky Top Bar?

You may have seen these on some websites before. These are long horizontal bars that are placed at the very top of the web page. Typically, they tend to be short in height because they will move with you as you scroll the page. The reason for the short height is to make sure that the sticky top bar does not take up too much space on the page since it always takes up the space that it occupies. If the sticky top bar is too large, it will take up too much space and make it harder to read the page.

Why Are Sticky Top Bars Important?

Sticky top bars are important because they allow you to display some content that follows the user as they scroll. This is great for some type of call-to-action button or link because the user can click on it once they have read enough of the page’s content to make an informed decision. Instead of having the user scroll back to the top, they can just click on the button when they are ready. So making use of sticky top bars is a very strategic way of compelling users to click on a button as they read more of the page.

What is CSS Flex?

Flex is used for creating the buttons and placing them next to each other. This is a new way in CSS to arrange elements side-by-side without having to use older methods that were once popular. I will talk about these older methods later on and let you know why flex is so much better.

Why is CSS Flex So Great?

Flex is really great because it comes with a lot of property used to help you space your flex elements. A couple of flex properties include “justify-content” and “align-items”. You can use justify content to center your flex elements like you do with “text-align”. Align items is to use to center items in the middle like you do with “vertical-align”. There is a lot that you can do with flex so you should take a look at the details of Flex over at Mozilla.

Code Pen Example

Here is my sticky top bar using CSS Flex:

How Does The Top Sticky Bar Work?

When you go to the pen, you will see a top bar that looks like a header navigation. These two are similar in that they reside at the top of a website. A top bar is usually at the very top and is glued there. The header navigation is usually a menu system that falls right under the top bar. You will notice that as you scroll through the text, the sticky top bar stays in place and follows you as your scroll. This is the beauty of having the top bar glued to the top of the page. No matter how far you scroll, you can still click on the button in the top bar. This is a very good way to allow your users to read the information on your page and then click on a call-to-action button once they are better informed with your content. I will explain the code in the following sections.

The HTML

The HTML in this pen uses divs as containers that you can section off your elements. That is why you see a large blue bar with three green buttons. Inside each button, I use a phone icon and some text next to it. Once you understand how to use divs to create containers, then it becomes simple to nest your divs properly. You can see that I just created one call button and then repeated it twice to re-create two more buttons. That is how you duplicate your elements and just change what is different. This makes writing code so much faster because you just copy and paste your elements over and over instead of writing it all out again. Also, when you copy a button, it takes all the HTML with it so that when you paste it, you get an exact replica of it. If you try to create another button by hand, you might incur some coding errors due to issues typically revolving around human typing errors. We all make typos every now and then. So just copy and paste when you want to duplicate elements.

Creating Call-to-Action Buttons With Icons Using SVG (Scalable Vector Graphics) Tags

You notice that in the HTML, the call-to-action buttons have phone icons that use SVG tags. These are actual HTML tags and not images like you would normally expect when you see graphics, images, or pictures. The difference here is that you are not using the expected <img> tag like you would for images. Instead, I used <svg> tags because it is a much better way to add images to your page if <svg> tags are available.

The Advantages of SVG Tags Over Image Tags

One of the largest advantages of using SVG tags is that they do not have to be uploaded to a server first and then linked to like traditional images. This not only saves you the step of having to upload an image first, but you no longer have to worry about serving an image that is just yet another asset that could slow your page down.

Font Awesome: List of Free Icons

SVG tags use coordinates to draw the icon and you can get these icons for free from Font Awesome. This website has a large collection of free icons for use. Most of these icons are specifically suited for creating call-to-action buttons because they specify an action for a user to take. Some icons you have to pay for but there are enough free icons for you to use.

The phone icons are pretty much the main thing that I wanted to show in this pen. If you would like to see my other pen that is similar on call-to-action buttons. If you are interested in HTML/CSS/JS then you should take a look at my other pen as I explain my code in that pen so that you understand what it is doing.

The Content

Nothing really exciting here. I just placed enough content at the bottom of the page so that the page would scroll. The scrolling is necessary to show you how the top bar stays in place when you read more of the content. The good part of the sticky top bar is that it will follow you throughout the pages no matter how long the content is. As long as you keep scrolling, the top sticky bar will stay with you until you reach the bottom.

In the next part, I will describe the CSS and how I used flex to create the buttons for the top sticky bar.

The CSS

Alignment: Centering Your Elements

When I create CSS, I always like to start at the top outermost HTML element and then work my way down into the nested children. So I start with the class “top-bar-container” and set up the standard properties. Most of the basic CSS properties involve alignment and getting your stuff centered. So you see “text-align:center” and “margin: 0 auto”. The text center is to center the buttons inside the element and the margin is used to center the actual top bar itself. 

Width and Padding: Adding Spacing For Readability

Then I set the width to 50% so that it’s size is half the width of the page. Then the padding is used to add spacing inside the top bar so that the buttons do not touch the edges of the top bar. Again, this is for readability so that everything is not so close to each other. 

Background Color: Providing Good Color Contrast

Then I just set a blue background color so that you can actually see the bar itself. If I left the background color of the bar as the default white, then you cannot see the bar because the background of the page is already white. White on white is very poor contrast, so your top bar needs another background color, like blue.

Making the Top Bar Sticky: Very Simple Actually

I know that sticky top bar is one of the main focuses of this article along with flex. When you see how simple the CSS is to make elements sticky, you will be surprised. Basically, there are only two parts to make elements sticky. You just need to set “position:sticky” and then set the position from the very top of the page to “top:0”. Those are only two properties that you need to make your top bar sticky. If you set “top:20px”, then this means that your top bar will move 20 pixels from the top and then be stuck to that place. Since you want your top bar to be at the very very top of the page, then set “top:0”.

In the next section, I will talk about flex that is used to create the buttons.

Flex: Neat Way to Place Elements Next to Each Other

After the div element for class “top-bar-container” comes “top-bar”. Top bar is the div where I start to use flex because this is the container for all of the buttons. So for this class, set “display:flex” and “flex-wrap:wrap”. Setting display to flex means that you want to use flex in CSS. Setting flex wrap to wrap means that you want the elements inside your div to wrap around the element. So if you have several elements inside your div, then they will go to the next line once they hit the edge of the div. By default, this will place elements side-by-side instead of on top of each other, like a stack.

Buttons: More Using Flex to Center the Icon and Text Horizontally and Vertically

Not only is flex used to place all three buttons next to each other, but also inside each button. Notice that each button has a phone icon and some text. I already explained how the phone icon works as a SVG tag earlier in the HTML section, so I will focus on the CSS part of it soon. Let us start with using flex to place the icon next to the text “Call Us Today!”. Again we set each class “button” with a few different flex properties. These properties include “display:flex”, “justify-content: center”, and “align-items:middle”. What these do is initiate flex with setting display to flex. You will want to center the icon and text in the button and set justify content to center. Then you need to align the icon and text to the middle of the button and set align items to middle. Both of these properties are used to center the icon and text both horizontally and vertically. 

You also need spacing between your icon and text so that they are not so close to each other. Flex has the “gap” property and I set it to 10 pixels with “gap:10px”. This is similar to using margin to place spacing around elements.

The other CSS for the button includes coloring and spacing just like for the top bar. If you check the css for the top bar and buttons, you will see that I used the same properties but with different values.

Button Hover States: Making the Buttons Look Interactive

You will notice that I use “.buttons:hover” to declare the hover pseudoclass. This allows you to change the properties of the button when someone moves their mouse cursor over the button. Standard protocol dictates that you must show that buttons can be clicked on if they are interactive elements on your page. Interactive meaning that these are buttons or links that you can click on. Or, form elements that require human interaction with human input. That was just a fancy way of saying when you need to do something on a page that is more than just reading the words on it, looking at the pictures, or watching a video.

In this case, I change the background color, the font color, and the mouse cursor on hover to let people know that the button is clickable. So hover states serve as an actual visual cue for action and are not just to make the buttons look pretty.

SVG CSS: Using Fill to Change the Icon Color

Something that I want to point out that is interesting is that for SVG tags, when you want to change their color, you use the fill property. So you use “fill:#FFF” for a white icon. Usually you use color for text and background-color for block (not inline) elements. Keep this in mind because this is something unique to SVG tags. Using fill has to do with how vector graphics work. Instead of designating a width and height like you do with raster images, you have your coordinates with a vector graphic and then you just fill it in with a color.

The JS/JQuery

The JS is just like my other pen, when you click on an element who has the class “button”, send the user to the page that is set to the element’s user-definfed “url” attribute. By user-defined, I mean that I created my own attribute called “url” and set it to a random telephone number. This is not a standard attribute but one that I added so that I could use it in jQuery.

Before flex, there were a couple of other ways to place elements next to each other that I would like to discuss.

The Old Ways of Placing Elements Next to Each Other

Do We Still Need to Use Floats and Clear Anymore?

If you know CSS, do you remember the left and right floats? Floating was a very popular way to place images next to each other instead of having them stacked on top of each other. The main difference between flex and float is that flex is applied to a parent element and the children element are placed side-by-side under the parent element. With float, you actually apply it directly to the element that you want to arrange next to each other. So in this case, you would set either a left or right float to the child element. Usually we use a left float. If you want to reverse the order, then use a right float. 

The thing about floating is that you need to stop it or else the float will be applied to every subsequent element. So you have to remember to either clear a left, right, or both floats. This is kind of weird how the floats could just keep running on like that. I can see why flex came along and replaced “floats”. Maybe floats still have a place in CSS. Floats have become less common with the advent of flex.

What About Display Inline Block?

Another way besides flex that can be used to arrange elements next to each other is by setting “display:inline-block” instead of with flex using “display:flex”. Using display inline blocks is okay, but with flex you can use so many other properties that come with flex. Think of flex as a library and not only is it easy to arrange, you can also align and space these elements using properties specific to flex. 

Summary

I created another pen because I wanted to talk about top sticky bars and CSS flex design. Both of these concepts are very important. Top sticky bars can have call-to-action buttons that follow users as they read your page. Once the user is informed with your page, they can then click on a button and convert. CSS flex is a great way to arrange your element on the page without having to use floats or display inline block anymore.

I also introduced SVG tags for icons that are great for adding graphics to your page without having to use actual images. Benefits include not having to add another asset that can weigh you page and slow it down. Also, you do not have to upload SVGs before you use them, their tags already have the coordinates in them that will draw the icon.

The idea is not to understand every single line if you are new to code. Rather, just understand the concepts that I show while explaining my code pen example. Basic concepts like alignment, spacing, color contrast and hover states to indicate an interactive element are important to building a usable web page. Remember, a good user experience is important for people to actually read and enjoy being on your website.

1 thought on “Creating a Sticky Top Bar With CSS Flex Design: An Example Using Code Pen”

Leave a Comment