This Is How You Can Resize Your Site Identity Bar and Make It Sticky
As a web developer, one of the most common challenges you'll face is optimizing the user experience on your site. Little details like the size and behavior of your site's identity bar can have a big impact on how visitors interact with your content.
If you've noticed that your site's identity bar is taking up too much precious screen real estate, or if it's staying stubbornly fixed in place even as users scroll down the page, don't worry – there are some simple CSS tweaks you can make to improve things.
In this article, we'll walk through two solutions to these common problems: resizing the identity bar and making it scroll with the page.
Resizing the Site Identity Bar
The size of your site's identity bar is usually controlled by CSS styles defined in your theme's style.css
file. Depending on your theme, the relevant styles might be nested within other selectors, but you're likely to find something like this:
.site-branding {
padding: 1.75em 0;
}
This sets the vertical padding (top and bottom) of the .site-branding
element to 1.75em. To reduce the size of the identity bar, you can simply decrease this value:
.site-branding {
padding: 1em 0;
}
Now the identity bar will take up less vertical space on the page.
Alternatively, you can target the height of the .site-title
and .site-description
elements directly:
.site-title {
font-size: 1.75rem;
line-height: 1.2;
}
.site-description {
font-size: 1rem;
line-height: 1.2;
}
Reducing the font sizes and line heights of these elements will also cause the identity bar to take up less space.
If your theme has a settings panel where you can customize the identity bar, you may be able to make these changes without having to edit any code. Look for options to adjust the padding, font sizes, or other layout properties.
Making the Identity Bar Sticky
The other common issue with site identity bars is that they tend to stay fixed in place even as users scroll down the page. This can be frustrating, as it takes up valuable screen real estate and prevents users from seeing the full content of the page.
To make the identity bar scroll with the page, you'll need to apply some CSS to remove the position: fixed
property that's likely keeping it in place.
First, find the relevant CSS selector for the identity bar element. This is usually .site-header
or .site-branding
. Then, add the following rules:
.site-header {
position: sticky;
top: 0;
}
The position: sticky
property tells the browser to keep the element in its normal position on the page until a certain scroll position is reached, at which point it "sticks" to the top of the viewport.
The top: 0
rule ensures that the identity bar sticks to the very top of the page as the user scrolls.
You can also add some additional styles to control the background color, shadow, or other visual properties of the sticky header:
.site-header {
position: sticky;
top: 0;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
This will give the identity bar a clean, floating appearance as the user scrolls.
Combine the Solutions
Of course, you can combine the techniques for resizing the identity bar and making it sticky. For example:
.site-branding {
padding: 1em 0;
}
.site-title {
font-size: 1.5rem;
line-height: 1.2;
}
.site-description {
font-size: 0.9rem;
line-height: 1.2;
}
.site-header {
position: sticky;
top: 0;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
This will create a more compact, sticky identity bar that follows the user as they scroll down the page.
Test and Iterate
As with any web development project, it's important to test your changes thoroughly and get feedback from users. The right size and behavior for the identity bar will depend on the overall design and content of your site.
Don't be afraid to experiment and iterate. Try different font sizes, padding values, and sticky positioning settings until you find the perfect balance between branding, usability, and aesthetics.
And remember, if you ever need help diagnosing and fixing technical issues on your site, tools like Flowpoint.ai can automatically identify CSS and other coding problems that are impacting your site's performance and conversion rates.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.