You can simply increase the gap in the base navbar element! Here’s a quick example:
type: custom:navbar-card
...
styles: |
.navbar.desktop {
gap: 30px;
}
1 Like
What would be the best way to position the navigation bar in the lower left margin? In this position
Hi @Gisak17 , try something like this, adjusting the 16px to your desired margin from the left side:
type: custom:navbar-card
...
desktop:
position: bottom
styles: |
.navbar.desktop.bottom {
left: calc(var(--mdc-drawer-width) + 16px);
transform: unset;
}
Thanks, my mistake was that I still had the old theme under Profiles.
Now it works so far that the nav is displayed correctly, but my 3 sections that are normally next to each other are broken on the iPad (not air or pro). So I only get 2 sections next to each other and my 3rd section is moved to the new row.
Any ideas?
Hi…there is a way to change label’s color? thank u so much
Was there a Breaking change? My submenu is not working anymore
it is working on desktop but not on mobile
I cleared the cache but does not work
Does the snippet in the README still only support sections? I am having trouble getting the padding to work on dashboard that are using diferent layouts. It doesn’t seem to work for vertical or horizontal layout.
Hi @Tsunami , sorry for the delayed response. When adding a padding on the left of the dashboard, if the space was already tight for 3 columns, it’s expected that HA decides to move the third one to the next line.
You can try reducing the padding-left of your theme until you get enough clearance for the navbar, but without having the third column be in the new row.
Home_Assistant_Clean:
card-mod-theme: Home_Assistant_Clean
card-mod-root-yaml: |
.: |
/* Add padding to the left (or other sides, depending on your navbar position) for desktop screens */
@media (min-width: 768px) {
hui-sections-view {
padding-left: 120px !important; // <--- Try reducing this padding to something like 16px, give or take.
}
}
/* Add bottom padding for mobile screens to prevent cards from overlapping with the navbar */
@media (max-width: 767px) {
hui-sections-view:after {
content: "";
display: block;
height: 80;
width: 100%;
background-color: transparent;
}
}
Hi @AndreaDR , when you say changing the label’s color… are you referring to just the text color? In that case, try this:
type: custom:navbar-card
...
styles: |
.route {
color: red; <---- Replace with your color
}
@broconne it’s still just for sections at the moment, yes. In fact, i’ve tried navbar wth a “masonry” layout and the detection of whether the card is in edit mode or not is a bit broken 
I’ll take a look and try to both fix this issue, and update the css snippet on the README
1 Like
@joseluis9595 This is an AMAZING card. This is exactly what I was looking for.
I tried GitHub - DBuit/sidebar-card, but I gave up, because the config was cumbersome and some stuff just didn’t work.
Keep up the great work, looking forward to seeing all the cool stuff you come up with 
" * You are using your custom theme (Profile > Browser settings > Theme)"
I was setting the theme per tab and not in profiles. It only worked when setting in the profile. Might be worth adding to the doc 
That would be great. I will note that I have converted one of my views to section and it is still not working. The navbar card is covering the bottom the element. I did change the theme to make all the cards red, so I know it is being picked up.
thank u so much @joseluis9595 i ve got it! that s what i meant! … what about icon’s color ? it s possilbe change it?
type: custom:navbar-card
...
styles: |
.button {
--icon-primary-color: red;
}
.button for all icons, .button.active for the active icon
1 Like
For reasons unrelated to navbar, I have an automation which navigates a wall tablet to a particular dashboard page via browser_mod call. This page has a navbar card at the bottom. For whatever reason, the “active” route is not highlighted when this happens. If you navigate to this page via navbar card option from another page, then it works as expected, but when called from browser_mod, there is no “active button”. Is this a “bug” that can be fixed? If not, is there a way to “hardcode” the active button on this particular page via styles or otherwise? Its a very minor quip, but when the rest of the navigation is so smooth and perfect, it gets noticed. See below for a picture of the issue. The card in the picture is the “timer” option in the navbar. It should be highlighted, but since this page was called via browser_mod automation, it isn’t.
thank u @mase
Thank you so much @nstrelow ! sidebar-card is a really cool card, but for simple navigation it is quite overkill, yeah. I created navbar-card for that exact reason, being able to navigate through screens as easy as possible, ignoring the “rough” design of the native tabs in HA
Noted! Will add it with the next release. Thanks again!
1 Like
Hi @sdholden28 , I’ll take a look to check what can be happening. I suspect the card might not be detecting that it needs to re-render after the url changes without reloading the page…
As of now, you can use the selected prop for each route to either customize the behaviour, or even hardcode it to true. Quick example:
type: custom:navbar-card
...
routes:
...
- icon: mdi:timer
label: Timer
...
selected: true <---- add this value in the navbar of said screen