- Home
- Docs
- Saasland Documentation
- Saasland Elements
- Saasland Navbar
Saasland Navbar
Estimated reading : 3 minute
Saasland Navbar comes with different bars and navigation options that you can use on your website to create navigation bars and menus.
Using Saasland Navbar
You can use Saasland Navbar by customizing the following options: Contents and Advanced.
Content:
In the content section you can modify the following options:
- Menu
- Logo
- Retina Logo
- Layout Settings
- Navbar Settings
- Buttons
Menu:
From the Menu option, you can pick the different available preset. There are 4 different preset styles to choose from.
Logo:
From the logo option, you can put the logo and bring some minor modification on the logo easily.
Retina Logo:
You can upload a separate retina logo from this option easily.
Layout Settings:
From the Layout settings, you can select the layout you want. There are three different options to pick from. You can select any of these and get started.
Navbar Settings:
From the navbar settings option, you can enable or disable the navigation bar to be sticky or not.
Buttons:
This option will allow you to add and customize the buttons on the navigation bar. You can add different items and modify many options of the buttons. You can add button text, URL, font color, background color, border color and more. You can also design how the buttons will look if the navigation bar is sticky.
Advanced
In the Advanced section of the tool, you will have the flexibility to add margin and padding to the element. You can also modify the Z-index to customize the element more.
You will also get the chance to edit and customize the following options:
- Motion Effects
- Background
- Border
- Positioning
- Responsive
- Attributes
- Custom CSS
Motion Effects:
From the Motion Effects option you can add different effects such as fading, zooming, bouncing, sliding, rotating, attention seeking motion, lightspeed and more effects to make your website look different.
Background:
If you want to customize the background with specific color, gradient or images, you can do that from the advanced settings as well. You can pick background type, color, gradient, gradient type and more.
Border:
If you want to add any line, box, dots and other design variations as borders of the element, you can do it from here. You can also customize the size and insert shadow effects if you want to.
Positioning:
This feature will allow you to fix the positioning of the element. From the width section you can select if the position will be full width, inline or customized. And you can set the position as absolute or fixed as well from these settings.
Responsive:
You can check the responsiveness of the elements if you toggle through the available options. However the change of the widget will be only visible on the live page or preview, not in the Elementor.