Good afternoon!
I am having some slight issues with a new installation of Drupal 8, with bootstrap CDN as my theme config.
Currently I am trying to setup my portfolio to display different menu items on different pages
This is my main nav on my homepage: Home - Contact - Game A - Game B - Forums
If a user clicks on Game A then the top nav will be: Home - Downloads - Maps - Server - Forum
I have gotten this far, however When I add a custom menu and place it on the top navigation display block, it falls out of formatting and blocks other menu items from being clickable.
This is how the menu should look - https://i.imgur.com/pw5ReFt.png
This is how the custom menu is being formatted - https://i.imgur.com/KJe6Z4W.png
Is this happening by design or am I missing a setting somewhere?
Comments
=-=
review the css being used on both menus (browser dev tools) or provide a link to the site.
Sure, my domain is http:/
Sure, my domain is http://bco3d.com/
I tried to debug and play with the css in FF dev but was unable to get even the custom menu by itself on node/2 to format like default menu style you see on the homepage.
=-=
I see the issue with the CSS but think you need to take a step back for a moment and review how you are trying to accomplish this.
Essentially what it seems to me that you are trying to do is reinvent Drupal's already existing secondary menu system. I suggest reviewing the following link for how to utilize your secondary menus https://prkos.hr/Primary-and-Secondary-Navigation-Drupal-8
I had a feeling that my issue
I had a feeling that my issue was because of something like that. I have not used Drupal in about 4 years, so things have definitely changed. So if I had to guess, the new menus are not being formatted because they are not a system menu? That is about all I could gather.
Maybe I am not understanding, but if my above explanation is incorrect- I don't understand why new menus are being displayed differently than others in the same block, assuming they inherit their styling from the block that contains them.
=-=
the issue seems to me to be that you are adding a second menu to the same region. If yes why? Asked a different way, are all of your menu items in the same menu within the drupal ui and therefore in the same block within the block ui? if no, why?
Secondarily, test your menu set up on a core theme. Does the same issue occur?
Using the Bartik default
Using the Bartik default theme, the page and menus(both system and user made) render horizontally and correctly. If you take a look at my website now, you can see what I am trying to accomplish. The menu links on my homepage are different from the menu links on /node/2 - because they will be displaying different content types. I do not wish to utilize a secondary block for extra menus nor am I trying to incorporate two menus at the same time, in the same block.
=-=
two menus (blocks) in same region. Essentially barktik is doing the same thing it's just that it's in tabs and has different CSS. Please provide a screenshot of the blocks layout for where these menus are. though I can clearly see that there are two blocks generating menus to the same region based on the HTML. there is the main menu block and then the dod nav block within the same region.
A different menu per node is going to cause menuitis and may lead to performance issues. If you want to go that way then I suggest a second region (under the primary) for the 'second menu' so that there are no CSS inheritance issues from the primary main menu region. Else you need to target the current block (dod nav) specifically with CSS (since the theme isn't expecting a dod nav element to be there) and increase the padding/margin of the 'second' menu to push it down from the top within the existing region in bootstrap as well as align the menu items to put them in a row rather than a column. There is not an already exiting height so you will have to target and write it but highlighting the element in your dev tools and reviewing the blocks nesting will illustrate that the menus are overlapping due to the CSS not being set up by default to do what you want.
Block layout in Bartik -
Block layout in Bartik - https://i.imgur.com/yWPRm6a.png
Block layout in Bootstrap - https://i.imgur.com/E91HNAZ.png
So this could be solved with something as simple as a new class in the stylesheet to float the menu items?
=-=
Yes but that's a lot more work (and a lot more confusing CSS) then adding a region under the primary nav for these new menus to reside. Then CSS it targeting the block class which would impact every menu you put into the new region.
If the intent is to make them align with the primary nav in the same row you would either again need some confusing CSS or add and set both it and the primary to align next to one another.
Another method (if you don't care about menuitis) would be to hide the main menu block when on the node path and display the new menus on a per node basis but this would be a configuration nightmare as the site expands. This would also mean you'd have to duplicate the common menu items for each menu.
I do believe I have been
I do believe I have been trying to replicate your last comment, displaying menus on a per node basis. the DOD menu only displaying on certain content type (dod page) and dayz menu on dayz page content type, and then disallowing the main system nav menu on those two content types.
again, if you go to the home page, and then /node/2 - youll see that there is only one menu on each page, its just that my user created menu does not share the same formatting as the system menu even though they are in the same block region.
If I am starting to repeat myself I apologize. I just thought that moving my project to barebones drupal with a bootstrap front end might give me easier setup and functionality down the road as compared to using code-igniter and bootstrap as I was previously doing.
Heck, I suppose I could even have 3 installs of drupal, but I suppose that would convolute search and SEO.
=-=
You need to style the new menus like the default main menu They won't pick up the current classes because those new menus don't have the same ID's and classes as the expected by the CSS for default main menu. Simply placing something in a region doesn't inherit all CSS. A comparison of the HTML and the CSS being utilized for each will illustrate what I'm saying to you.
The same review of the HTML will also illustrate that you have TWO menus displaying on any one node in the same region. You have the default menu AND the user created node menu. Hence the reason it isn't working the way you want.
image illustration:
https://pasteboard.co/J1Guotz.jpg = shows you what is going on from a display POV.
https://pasteboard.co/J1GuUFz.jpg = shows the main element HTML for each and illustrates in code that both menus are indeed being rendered because you've not edited the main menu block configuration and hide it on the /node/path. I suggest doing this by setting it to display only on the front page using the following tag in your 'show only on' text box within that specific block configuration.
.
Understood. Ill have to
Understood. Ill have to download my theme locally and play with it and see what happens.