Navbar
Navbar

Navbar

Site Customization

Customizing Navbar

If you're looking to add a personal touch to your Bullet.so site, customizing your navbar is a great place to start. Here are a few CSS code snippets that can help you achieve the look you want:

How to

Add Content-Fitted Navbar

Craft a navbar that automatically adjusts its width to precisely match the width of the content it contains.
.bullet-navbar{
    padding-left: calc((100vw - 1225px)/2 + var(--navbar-padding));
    padding-right: calc((100vw - 1225px)/2 + var(--navbar-padding));
}

Add Icon-First Navbar

Revamp your navbar design by placing icons before the call-to-action (CTA) button.
.bullet-navbar-cta {
  order:10;
}

Change the dropdown menu background

Customize the background of your dropdown menu to reflect your unique style and design preferences.
.navbar-dropdown {
  background: #000000;
}

Change the dropdown hover item background

Customize the hover background of your dropdown menu item to reflect your unique style and design preferences.
.nav-drop-item-container:hover {
  background: #e4e4e4;
}

Change the dropdown item color

Personalize the title and description color of dropdown items to match your design aesthetic, creating a visually cohesive and engaging navigation experience.
.nav-drop-title {
	color: #a41d1d;
}
.nav-drop-desc {
	color: #7e7a6b;
}

Add adjustable dropdown item icon width

Customize the width of dropdown item icons to achieve the desired visual balance and alignment, enhancing the overall aesthetics and readability of your navigation menu.
.nav-drop-icon {
	width: 25px; 
	height: 25px;
}

Examples

Glass Effect for Navbar

notion image
Elevate the visual appeal of your navbar with a sleek glass effect, creating a modern and stylish aesthetic that adds depth and sophistication to your navigation experience. The glass effect brings a touch of elegance and transparency, seamlessly blending with your website's design while providing a visually captivating and contemporary look.
:root {
  --navbar-bg-color:rgb(19 20 20/6%);
  --navbar-padding:2rem;
}
.bullet-navbar{
    width:60rem;
    margin: 3px auto;
    background-color: var(--navbar-bg-color);
    border-radius: 10px;
    position: var(--navbar-type);
    height: var(--navbar-height);
    top: 20px;
    padding-left: var(--navbar-padding);
    padding-right: var(--navbar-padding);
    z-index: 999999;
    backdrop-filter: blur(10px);
}
.navbar-link{
  background-color: unset !important;
}
.navbar-menu{
  background-color: unset;
}
.navbar-item:hover{
  background: unset !important;
}
 

References

Variables

Our navbar variables empower you to easily customize its appearance, including colors, fonts, spacing, and more. With just a few tweaks to these variables, you can achieve a navbar that perfectly aligns with your brand or design preferences.
 
Variable
Description
Supported Values
--navbar-bg-color
Sets the background color of the navbar.
Any valid CSS color value
--navbar-fg-color
Sets the foreground color (text color) of the navbar.
Any valid CSS color value
--navbar-btn-bg-color
Sets the background color of the call-to-action buttons.
Any valid CSS color value
--navbar-btn-fg-color
Sets the foreground color (text color) of call-to-action buttons.
Any valid CSS color value
--navbar-brand-font-size
Sets the font size of the navbar brand/logo.
Any valid CSS font-size value
--navbar-brand-logo-width
Sets the width of the navbar brand/logo.
Any valid CSS width value
--navbar-padding
Sets the left and right padding of the navbar.
Any valid CSS padding value
--navbar-shadow
Sets the shadow properties for the navbar.
Any valid CSS box-shadow value
--navbar-align-links
Sets the alignment of the navbar links.
"left", "center", "right”
--navbar-type
Sets the type (e.g., static, fixed, etc.) of the navbar.
"static", "fixed", "sticky", "absolute", "relative”
The "Supported Values" column provides an overview of the types of values that can be used for each CSS variable. Feel free to modify these variables using the supported values to achieve your desired customization.
How to use
/* Example: How to use CSS variable */
/* Below code will change the background color and link alignment of the navbar  */
:root {
	--navbar-bg-color: #e4e4e4;
	--navbar-align-links: center;
}
  1. Copy the provided CSS code snippet containing the navbar theme variables into your CSS file or code > CSS(in bullet site dashboard) section.
  1. Add or Modify the values of the navbar theme variables according to your desired customization.
  1. Save the code and publish the site.

Classes

If you require further customization beyond the provided theme variables, you can leverage these additional navbar classes to achieve your desired design.
 
Class
Description
.bullet-navbar
Represents the main container for the navbar.
.navbar-brand
Represents the container for the navbar brand/logo.
.navbar-brand-logo
Specifies the styling for the logo image within the navbar brand.
.navbar-item
Defines the styling for individual items within the navbar.
.navbar-burger
Represents the hamburger icon for the mobile navigation menu.
.navbar-menu
Defines the container for the navbar menu items.
.navbar-link
Styles the dropdown links within the navbar menu.
.navbar-dropdown
Represents a dropdown menu within the navbar.
.nav-drop-item-container
Defines the container for individual items within the dropdown menu.
.nav-drop-icon
Specifies the styling for icons within the dropdown menu item.
.nav-drop-title
Specifies the styling for the title of a dropdown menu item.
.nav-drop-desc
Defines the styling for the description of a dropdown menu item.
.nav-cta-btn
Represents a call to action element in the navbar.
How to use
/* Example: How to use CSS class */
/* Below code will add a shadow and border radius for the navbar call to action. */
.nav-cta-btn {
	border-radius: 9999px;
	box-shadow: 0px 0px 4px 0px gray;
}
  1. Copy the provided CSS code snippet containing the navbar class into your CSS file or code > CSS(in bullet site dashboard) section.
  1. Add or Modify the navbar classes according to your desired customization.
  1. Save the code and publish the site.