customize font navbar

[rafaelrdealmeida]

Hi,

I'm not finding information on how to customize the font of navbar by infima. Any indications?

For example, to customize the font of the entire site it's like this:

:root {
  --ifm-font-family-base: 'Josefin Sans', sans-serif;
}

what would it be like for the navbar? where can I find more information about --ifm?

best

[Siemienik]

instead of :root you may use nav.navbar selector and set variables in the scope of the navbar.

example:

nav.navbar {
    --ifm-font-family-base: 'Josefin Sans', sans-serif;
    --ifm-navbar-background-color: red;
}

[rafaelrdealmeida]

Still doesn't work. I'm trying to put a general font different from the navbar font.

:root {
  --ifm-color-primary: #348EFA;
  --ifm-color-primary-dark: #0643af;
  --ifm-color-primary-darker: #0640a5;
  --ifm-color-primary-darkest: #053488;
  --ifm-color-primary-lighter: #0856df;
  --ifm-color-primary-lightest: #1969f7;
  --ifm-code-font-size: 95%;
  --ifm-footer-background-color: #E0473F;
  --ifm-font-family-base: 'Josefin Sans', sans-serif;
}


nav.navbar{  /*:root doesn't work/*
    --ifm-navbar-background-color: var(--ifm-background-surface-color);
    --ifm-navbar-height: 3.75rem;
    --ifm-navbar-item-padding-horizontal: 1rem;
    --ifm-navbar-item-padding-vertical: 0.25rem;
    --ifm-navbar-link-color: var(--ifm-font-color-base);
    --ifm-navbar-link-hover-color: #7aa1e2;
    --ifm-navbar-link-active-color: var(--ifm-link-color);
    --ifm-navbar-padding-horizontal: var(--ifm-spacing-horizontal);
    --ifm-navbar-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.5);
    --ifm-navbar-shadow: var(--ifm-global-shadow-lw);
    --ifm-navbar-search-input-background-color: var(--ifm-color-emphasis-200);
    --ifm-navbar-search-input-color: var(--ifm-color-emphasis-800);
    --ifm-navbar-search-input-placeholder-color: var(--ifm-color-emphasis-500);
    --ifm-navbar-sidebar-width: 80vw;
    --ifm-navbar-font-family-base: 'Montserrat';

}

[Siemienik]

Do you know that you do not close a comment?

Please change:

/*:root doesn't work/*

to:

/*:root doesn't work */

[rafaelrdealmeida]

yes, i just commented here

:root {
--ifm-font-family-base: 'Josefin Sans', sans-serif;
}


nav.navbar{
  --ifm-font-family-base: 'Montserrat'; 
}

[slorber]

We don't seem to use infima font variable in the navbar

This seems to work:

:root nav.navbar {
  font-family: sans-serif;
}

[rafaelrdealmeida]

Worked, thank you!