How to set the font size of a navigation menu

[tacoWanneeJama]

How do I set the font size? I have tied to set the BodyOptions = new ThemeBodyOptions() of the theme, but this did not work. Can it be done in the ThemeBarOptions ?

[stsrki]

At the moment, only with custom CSS.

try this

.navbar[data-mode^=vertical] .navbar-collapse > .navbar-nav > .nav-item > .nav-link,
.navbar[data-mode^=vertical] .navbar-collapse > .navbar-nav > .nav-item > .dropdown[data-visible] > .nav-link {
  font-size: 1.25rem;
}

We can consider adding it to ThemeBarOptions.

[tacoWanneeJama]

Does this work ok when it is collapsed? It should not override.
This does not impact submenu's.
I tried:
.navbar-collapse > .navbar-nav > .nav-item > .nav-link, .navbar[data-mode^=vertical] .navbar-collapse > .navbar-nav > .nav-item > .dropdown[data-visible] > .nav-link { font-size: 14px; }
But then then the menu text beside the icon is not removed when the sidebar is collapsed

[tacoWanneeJama]

When collapsing the font size is set to 0 to hide the text. But this must not be overruled in css....

[stsrki]

Best to inspect the element in collapsed mode and to see what selector to use.

[tacoWanneeJama]

The main menu text I get hold on by using:
.navbar[data-mode^=vertical] .navbar-collapse > .navbar-nav > .nav-item > .nav-link, .navbar[data-mode^=vertical] .navbar-collapse > .navbar-nav > .nav-item .nav-link { font-size: 14px; }
This works fine for the font size and hiding when collapsed. I can not get it to work for the submenu's.

[tacoWanneeJama]

[stsrki]

Try this

.navbar[data-mode^=vertical] .navbar-collapse > .navbar-nav > .nav-item > .nav-link > .pe-none,
.navbar[data-mode^=vertical] .navbar-collapse > .navbar-nav > .nav-item > .dropdown[data-visible] > .dropdown-toggle > .d-flex .pe-none,
.navbar[data-mode^=vertical] .dropdown[data-visible] > .dropdown-menu-container > .dropdown-menu .dropdown-toggle > .d-flex .pe-none {
  font-size: 1.5rem;
}

[tacoWanneeJama]

My working code is:

.navbar[data-mode^=vertical] .navbar-collapse > .navbar-nav > .nav-item > .nav-link,
.navbar[data-mode^=vertical] .navbar-collapse > .navbar-nav > .nav-item .nav-link {
    font-size: 14px;
}

.navbar-collapse > .navbar-nav > .nav-item > .nav-link, .navbar[data-mode^=vertical] .navbar-collapse > .navbar-nav > .nav-item > .dropdown[data-visible] > .nav-link {
    font-size: 14px;
}

.navbar[data-mode=vertical-small] .navbar-collapse > .navbar-nav > .nav-item > .nav-link, .navbar[data-mode=vertical-small] .navbar-collapse > .navbar-nav > .nav-item > .dropdown > .nav-link, .navbar[data-mode=vertical-inline][data-collapse=small] .navbar-collapse > .navbar-nav > .nav-item > .nav-link, .navbar[data-mode=vertical-inline][data-collapse=small] .navbar-collapse > .navbar-nav > .nav-item > .dropdown > .nav-link, .navbar[data-mode=vertical-popout][data-collapse=small] .navbar-collapse > .navbar-nav > .nav-item > .nav-link, .navbar[data-mode=vertical-popout][data-collapse=small] .navbar-collapse > .navbar-nav > .nav-item > .dropdown > .nav-link {
    font-size: 0;
}

[tacoWanneeJama]

It would be nice if it could be done more easy.