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).
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 
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 by hubsif Ā· Pull Request #835 Ā· openhab/openhab-webui Ā· GitHub will add a fullscreen mode.
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. 
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