Headers
Documentation and examples for Blueberry's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
How to use?
Copy-paste the following
<script> near the
end of your pages under JS Blueberry to enable
them.
Copy-paste the init function under
JS Plugins Init., before the closing
</body> tag, to
enable it.
Using unfold.js with header (eg. Topbar dropdowns, Search and Sidebars)
If you are planning to add things like, search, language dropdown, sidebar or anything similar, add the below given scripts.
Copy-paste the following
<script> near the
end of your pages under JS Blueberry to enable
them.
Copy-paste the init function under
JS Plugins Init., before the closing
</body> tag, to
enable it.
Supported content
Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:
With Blueberry dropdown
Heads up!
If you still intend to use submenu within a dropdown menu, you will need to include the
hs.megamenulibrary.
Color schemes
Theming the navbar has never been easier. Apply the parent
.header-white-nav-links-*
class next to the
.header class.
Transparent
Add a
.header-bg-transparent
class to a parent element (must come before
.header-section class),
also you can use
.header-white-nav-links{-sm|-md|-lg|-xl}
white color nav links class for clear displaying the links.
Transparent
.header-bg-transparent{-sm|-md|-lg|-xl}
classes are also available for responsive breakpoints.
And here's an example with border.
Placement
Use our placement-classes to
place navbars in non-static positions. Choose from fixed to the
top, fixed to the bottom, or stickied to the top (scrolls with
the page until it reaches the top, then stays there). Fixed
navbars use
position: fixed, meaning
they're pulled from the normal flow of the DOM and may require
custom CSS (e.g.,
padding-top on the
<body>) to prevent
overlap with other elements.
Example page: Header default
Example page: Absolute top
Example page: Sticky top
Example page: Floating
Responsive behaviors
Placement classes can utilize
.header-*{-sm|-md|-lg|-xl}. Learn more placement behaviors.
Navbars can utilize
.navbar-toggler,
.navbar-collapse, and
.navbar-expand{-sm|-md|-lg|-xl}
classes to change when their content collapses behind a button.
In combination with other utilities, you can easily choose when
to show or hide particular elements.
For navbars that never collapse, add the
.navbar-expand class on
the navbar. For navbars that always collapse, don't add any
.navbar-expand class.
Methods
Options can be passed via data attributes or JavaScript. For
data attributes, append the option name to
data-hs-circles-options='{}'.
| Parameters | Description | Default value |
|---|---|---|
|
|
The distance after which the
js-header-fix-moment
class will be added to the initialized element, which
initializes the animation specified in
fixEffect
|
0 |
|
|
If the header contains elements with the class
header-section, then it adds the classes specified in
Otherwise, it searches for the given parameter in
data-hs-header-options
and adds classes to the header. These classes are added
when the scroll value is greater than or equal to the
value in fixMoment
|
null |
|
|
If the header contains elements with the class
header-section,
then removes the classes specified in the elements
Otherwise, it looks for this parameter in
data-hs-header-options
and removes the classes from the header. These classes are
deleted when the scroll value is greater than or equal to
the value in
fixMoment
|
null |
|
|
Determines with what effect the initialized element
disappears. There are 2 options:
slide,
fade
|
'slide' |
|
|
Determines with what permission the plugin is initialized. Resolution Map corresponds to Bootstrap 4 | 'lg' |
Placement classes
List of available classes and their descriptions.
| Class | Description |
|---|---|
|
|
Static type, behaves as with the rule
position: static;.
Its geometry is taken into account when rendering a page.
|
|
|
Practically the same as static, but the geometry of this
type of header is not taken into account when rendering
the page (because of
position: absolute;). This type of header is well suited for
transparent/half-transparent header designs that are
displayed on top of the slider/hero/etc. Its geometry is
taken into account when rendering a page.
|
|
|
This type of header works when we have the first section
on the page that has a
height: 100vh;,
i.e. fullscreen. It is displayed as adhering to the top of
the second section in the stream on the page. The geometry
of this header is also excluded from the calculation of
the positioning of all elements on the page.
|
|
|
The same as
header-abs-top,
only the header is displayed as sticking to the bottom of
the first section in the stream.
|
|
|
It is displayed as sticking to the top of the screen
always (position: fixed; top: 0;). The geometry of this header is also excluded from the
calculation of the positioning of all elements on the
page.
|
|
|
It is displayed as always (position: fixed; bottom: 0;) adhered to the top of the screen. The geometry of this
header is also excluded from the calculation of the
positioning of all elements on the page.
|
Behaviors
List of available classes and their descriptions.
| Class | Description |
|---|---|
|
|
Show/hide an item when scrolling to the user specified
time. This moment is given in the form of the number of
scrolled pixels, through the attribute
data-header-fix-moment="". There are 3 available options for how to show/hide an
element using the
data-header-fix-effect=""
attribute:
|
|
|
Changes the logo at the time specified by the user. This
moment is given in the form of the number of scrolled
pixels, through the attribute
data-header-fix-moment="". The markup of the logo is important, and should look
like this:
|
|
|
Changes the appearance of the sections at the time
specified by the user. This moment is given in the form of
the number of scrolled pixels, through the attribute
data-header-fix-moment="". You can control the appearance of each section with 2
attributes:
!important CSS
parameter.
For example: In this case, to change the section from gray to dark, we remove header-section-light bg-secondary
(which by default is on this element) and add
header-section-primary bg-primary.
|
|
|
Show/hide one of the header sections (preferably the very
first) at the user specified time. This moment is
specified as the number of scrolled pixels, through the
attribute
data-header-fix-moment="". For this, the section itself needs to be given the
class
.header-section-hidden.
|
|
|
This class is auxiliary and is used to reset the previous
behavior (with the previous permission, if the user has
changed the window size) on a certain viewport. For
example, if the user wants to open/show a section on
-xs, -sm, but not
higher. (Because Blueberry alike Bootstrap is developed
mobile first, a strategy in which we optimize code for
mobile devices first and then scale up components as
necessary using CSS media queries.), having set
-sm it will work
and on permissions above, in order to prevent it use this
class.For example: here the behavior of toggle-section will
work until the resolution is
-md (that is, xs, sm), on viewport
-md it will not
work.
|
A certain behavior is tied to a specific position
Because of the complexity of the task itself with behaviors and positions, a certain behavior is tied to a specific position. That is, if you want the above
-lgto work show-hide, you need to specify 2 classes.For example:
Behavior classes
List of available classes and their descriptions.
| These placement classes can have the following behavior classes | Description |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|