As stated in the Subject the Navbar Toggler is displaying in the background and not in the foreground as is normal. Secondary the Toggler is positioned wrong. It should be on the right side of Reflections.
What the menu bar looks like by itself in Phone view:
What the navbar looks like on a page:
Here is the code for the navbar:
Here is the code for the contact.php page illustrated above:
Any suggestions would be appreciated. Thank you all in advance.
Please provide a link to your page where we can check this.
It’s hard to debug on screenshots.
www.reflectionsedh.com - Wrong
http://reflectionsedh.com - Right
It looks like you are missing scripts in the head of your document.
Take this as an example.
You start a new project and create your first page, when you add the Navbar component it auto generates a whole bunch of code in the document body.
It also adds a link in the document head though, which is different depending on what component you decide to add, so for this example it’s a navbar which adds <script src="/dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js"></script> to the document head.
All will work perfectly, however if you decide to click the navbar and make it into a Server Side Includes document, then it is only going to take the code from the body of your document, and not the .js file mentioned above from the head of your document.
What this means is to correctly use your new ‘includes’ file is that when you create another new page and link the server side includes file to it, is that you also need to manually add the correct head .js file as per the original document.
To be honest to avoid making mistakes, or getting paths wrong, what I would do is on your new page add a normal navbar component from Wappler, so it adds all the required supporting scripts to your document head, then click the newly added navbar and delete it, which will delete the navbar but not the added head script. Then bring in your server side includes file and it will be able to reference the supporting scripts inside the document.
HI psweb, You were right in your assessment. The script was missing from each of the pages. I have since added them. It was not successful.
In phone view, the toggler appears on the right for some but not all pages. For those pages that it does not appear on the right side, it wraps to the next line.
In phone view all the toggler dropdowns are displayed underneath, not above, the section following the navbar. I’m still open for additional suggestions. However, I did learn something new.
Thank you, psweb.
Hi psweb, More of an update. I have made it work. I removed what I had and started fresh using your guide lines. As you stated, the trick was to make sure the was there.
I resolved the wrap around issue. The text font was too high a value. by reducing the font size by 2 resolved the issue. It would be very helpful for others that in the include tutorial a mention of your technique would be added. I assume this would hold true for any block that would be converted into an INCLUDE file and added to another page.
Thank you again for steering me in the right direction.
Glad this got it all working for you, I will add a note to the tutorial about this as I suppose not everybody, especially those who are not looking at the code as one of their main references will just be aware of.
