Two navbar in one page

I created two different navbar menus in two PHP files
The first is fix to top and the second should appear just below the first
If I insert in one page one of the two navbar menus (with Server Side Include) work perfectly, but if I insert them all two I only see the first one
Where am I wrong? Thanks

@Marzio, great question. Are your navbars named differently?

Yes menu1.php and menu2.php

I am sorry, I was not referring to the actual file names, but the id names of the navbars.

When you look at the App Structure, click on the navbar and look at the id name for both of them.

If one of the navbars is fixed top and another is normal, most probably the fixed one is covering the normal one, and you will probably need to add some margin top to it.

2 Likes

@Teodor, good point, I did not even think about that. :slight_smile:

Yes Menu1 and menu2 have been named
But if I put them all with two different includes, I will report an error
00

How do you put them in includes Marzio? What do the include files contain?

I think you may be missing a Javascript file, eg:
mCustomScrollbar.concat.min.js
(or some variation on this).

They are two php files, each with a header containing a navbar
Insert with Server Include php

Marzio, what do they contain exactly?
A link to your page will be helpful.

https://www.vacanzemarine.it/test_area/menu1.php
https://www.vacanzemarine.it/test_area/menu2.php

https://www.vacanzemarine.it/test_area/mix.php
with error not work

Hi Marzio, what exactly is not working? Seems to be working as it should?

Not work collapse button menu1 and little problem with dropdown menu2

I had a look at your code and it seems you have copy and pasted code perhaps. The code is a mess.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.vacanzemarine.it%2Ftest_area%2Fmix.php

I would suggest starting with a clean page. You have at least two closing body tags and content outside the body tags and several conflicts.

It looks like you are trying to use parts of a third party template?

1 Like

Mamma mia, che casino!

As @brad has hinted, there are many errors mainly due the the incorrect content of the include files. Brad's suggestion to start afresh is the best way. For this first part of the exercise, do not have separate include files, making sure that you have all of the functionality in one document.

While you are doing that, ensure that you do not have multiple references to the same JavaScript files, e.g. in your current main document you have jquery-3.3.1.slim.min.js loaded 3 times. This is enough to throw any browser into tantrum mode.

After you have the document working as it should, have a look at Wappler Video Training Part 7 - Complete Bootstrap 4 Navigation

1 Like

The errors in the menu1.php and menu2.php files, if we want to consider them errors are referred to modal actions that will work only when they are inserted in a definitive page.
Now I have eliminated them because at this stage the mix.php page only serves to verify the union of the two menus
The two files menu1.php and menu2.php do not seem to have errors, so it is true that individually they work correctly.
So to have the two menus on the same page I didn’t understand how I have to do if I don’t recall the two files with Server Side includes
The fact that the js file is called several times depends on the double include, or not?

Includes don’t work that way. You can’t include whole pages (with body, head and html tags and all) into other pages. You can only have one file that contains all the javascript, css and meta references. The includes are merely just ‘HTML blocks’ that fit in the main page structure.

OK! I got it
So if I understand correctly I must to prepare some files to include that have only the necessary code and in the head of the final page I must to insert the instructions code, making sure that they are not repeated or in conflict
If so, I think that including two different navbars, structured differently, can become a difficult, if not impossible.
Now I try and see how it goes