In Fw7, the navbar element has a shadow by default (screenshot of my old project):
However, in the latest version of Wappler, the navbar will always be shadowless. The shadow is just killed forever (under any settings):
Studying the difference in styles, I found that not only the style is missing:
. navbar:before {
content: ‘’;
position: absolute;
right: 0;
width: 100%;
top: 100%;
bottom: auto;
height: 8px;
pointer-events: none;
background: var (–f7-navbar-shadow-image);
}
But also such properties as:
background-image: var(–f7-navbar-bg-image,var(–f7-bars-bg-image));
background-color: var(–f7-navbar-bg-color, var(–f7-bars-bg-color, var(–f7-theme-color)));
Which are in the class .navbar
Fw7 is beautiful. True, this is a great tool. You can use it to make very beautiful and fast apps (both regular web and mobile apps). However, integration in Wappler is simply not well implemented right now. However, I want to believe that the day will come when the integration of Fw7 in Wappler will reach the level of Bootstrap integration, and then we will all get an amazing tool for creating great projects.
But this is all Framework7 own default CSS styling. It might have changed in the new version of Framework7.
You can easily overwrite it with own CSS but if you feel that the defaults are wrong you should report it on the Framework7 site as issue(github)
Not really Wappler related. We just use the styles they supply.
I had to roll up my sleeves and figure it out myself.
This is a problem on the Wappler side!
The problem is that the HTML layout of navbar has changed since version 5 (I may be wrong, because I don’t remember the exact version in which this happened).
The new HTML navbar layout uses a special tag to display the background:
<div class="navbar-bg"></div>
It is not generated by Wappler when the user inserts an element on the page. If you put it manually in the code, the problem will be solved.
Good one - yes we add this one when converting old Framework7 v4 to v5, but seems forgot to add it in the new inserts - will fix it in the next update.
this was fixed in Wappler 3.3.0