OH3: Hide Navbar

I think it is currently not possible, but wanted to double check here. Hiding top bar is currently not possible?

It’s not “hiding” but you can make it translucent, by adding these styles to the page config:

--f7-bars-bg-color: none
--f7-bars-border-color: none
--f7-navbar-shadow-image: none
--f7-bars-translucent-opacity: none
--f7-bars-translucent-blur: none
backdrop-filter: none
2 Likes

Thanks, Rainer.
it is more about the space I will gain.
Let’s see. I am sure Yannick will include a
no-navbar: false
no-toolbar: false
option in the future

1 Like

You can also remove the top/bottom offset & padding, if you want to use the full space - but keep in mind, that the navbar title and the control elements will still show up.

    --f7-page-navbar-offset: none
    --f7-page-toolbar-top-offset: none
    --f7-page-subnavbar-offset: none
    --f7-page-searchbar-offset: none
    --f7-page-content-extra-padding-top: none
    --f7-page-toolbar-bottom-offset: none
    --f7-page-content-extra-padding-bottom: none

I also had to realize that changing navBars’ properties does not remove the “top bar”.

all these properties

could be replaced by --f7-navbar-height: 0px but that just shifts the whole page to the top and the page is still overlayed by another bar containing elements of the MainUI like this:


sorry for asking Yannick @ysc . Is there a way to disable this top bar?
It is for a wall mounted device where a top bar is not required and takes a lot of space

These style variables does not do the same - the f7-navbar-height: 0px will sets the height of the topbar to 0px and moves all contents below up by the topbar-height respectively (including the title and the controls/actions in it) - the mentioned css variables will only set the offset / padding to 0 and still shows the topbar with its control-elements.

The combination of the removed offset / padding…

--f7-page-navbar-offset: none
--f7-page-toolbar-top-offset: none
--f7-page-subnavbar-offset: none
--f7-page-searchbar-offset: none
--f7-page-content-extra-padding-top: none
--f7-page-toolbar-bottom-offset: none
--f7-page-content-extra-padding-bottom: none

…and the transluscent topbar…

--f7-bars-bg-color: none
--f7-bars-border-color: none
--f7-navbar-shadow-image: none
--f7-bars-translucent-opacity: none
--f7-bars-translucent-blur: none
backdrop-filter: none

…is the closest to get rid of the (maybe not needed) offset / padding and making the topbar translucent, without sacrificing the title (which you could also ‘remove’ by adding --f7-navbar-title-font-size: 0, if needed) and important control-elements (like edit and the menu toggle).

translucent_title

hmmm. On an iPad it does not show any difference with the setting you provide:

config:
  label: Wohnzimmer
  style:
    --my-font-size: 1.3rem
    --my-font-color: "#EEEEEE"
    --my-font-color-active: "#00CCFF"
    --my-bg-color: "#223344"
    --my-bg-color-active: "#22334499"
    --my-border-radius: 5px
    background: "#111111"
    --f7-bars-bg-color: none
    --f7-bars-border-color: none
    --f7-navbar-shadow-image: none
    --f7-bars-translucent-opacity: none
    --f7-bars-translucent-blur: none
    backdrop-filter: none
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row

Hmm, you`re right.

It works on every device I tested it with - seems like these styles…

--f7-bars-translucent-opacity: 0.8; 
--f7-bars-translucent-blur: 20px;

…got set by another root component and overwrites the styles for iOS. You should switch to Android :crazy_face:

Okay, well no, but how are you supposed to navigate anyways if you don’t have the button to open the sidebar then?
I think Add a HABPanel like layouting page (WIP) by hubsif · Pull Request #835 · openhab/openhab-webui · GitHub will add a fullscreen mode.

Navigation is done via tabs or usage of popups

I have been following this discussion for a while. However, I decided for my own “grid” layout based on your standard layout pages as I do not want to loose responsiveness.

The following code completely hides navigation bar of a page:

    --f7-navbar-height: 0px
    --f7-navbar-font-size: 0px
    --f7-navbar-bg-color: transparent
    --f7-navbar-border-color: transparent
    --f7-navbar-link-color: transparent
    --f7-navbar-text-color: transparent

this works fine for desktop or android based browsers but for any reason not on iOS. I mean not at all working. It does not change a single pixel…
Anybody knows why or what I need to differently?
I have also tried all of these CSS variables:
https://framework7.io/docs/navbar.html#css-variables
but without luck

I can’t seem to get this to work. I’m trying to add it to a floorplan, so when I bring the floorplan up via a webpage card on a layout page it doesn’t show the menu. I’m going into Edit on the floorplan page, then code, then adding your text below config. So it looks like this:

config:
f7-navbar-height: 0px
f7-navbar-font-size: 0px
f7-navbar-bg-color: transparent
f7-navbar-border-color: transparent
f7-navbar-link-color: transparent
f7-navbar-text-color: transparent
label: Floorplan Light Level
sidebar: true
imageWidth: 2000
noZoomOrDrag: true
imageHeight: 2000
backgroundColor: black

It doesn’t seem to hide anything though.

on iOS these settings do not work. on android and PC based systems it should.
However, a few things have changed.
For layout pages try the following:

  showFullscreenIcon: true
  hideNavbar: true
  hideSidebarIcon: true

I’m on a PC. Correct me if I’m wrong, but wouldn’t I need to hide the menu via code on the floorplan page? That way the menu won’t be there when the layout page display its.

Also, to confirm, I’m adding those lines to the config section right?

there was a mistake in your first attempt. it has to be like this:

config:
  style:
    f7-navbar-height: 0px
    f7-navbar-font-size: 0px
    ...

or

config:
  showFullscreenIcon: true
  hideNavbar: true
  hideSidebarIcon: true

I’ve tried both but none seem to work. Nothing I do seems to have any affect on the title page or the menu icon, either in the floorplan view or the floorplan via shown on the layout page. I’m using the regular page system in OH 3. Is this something that only works for Habpanel?

Hi Rainer,

can you share your code of this widget?
I need a today-overview like your widget.

all the best, beste Grüße

Nico

Theres no code to share, this is just a css and textual mockup of things I had in mind. If I’ll bring that mockup to life, I’ll tell you first. :wink:

1 Like

if you are on 3.1M3 then all you need is to add these two lines to your page:

config:
  showFullscreenIcon: true
  hideNavbar: true