How to integrate Menu from theme with background block in Brizy
Hi Brizy Team,
I am working on a big website, a company intranet, with lots of pages and content. So far i developed it with Visual Composer but now I would like to switch to Brizy.
Of couse I have to keep the content I developed over the years with VC and just want to add new content using brizy.
My problem is it seems I cannot integrate the site menu and header image the way I did so far, but would need to do so to make the new brizy sites to blend in graphically with the rest.
What I did so far:
- I created a menu that is shown thoughout the site
- on a new site I show a header image
- since the menu is set to transparrent it integrates with the header image. it sits on top of it transparrent
- when scrolling down the page, the menu changes from transparrent to a sticky menu with a white background
When trying to do the same with brizy
- I can get the menu from my theme to show on the new brizy page
- Also I can create a header image
- problem is the two dont mix. The menu is coming first, then follows the header image, I cannot make the menu sitting on top of the image transparrent.
- also I have no idea how I could set the menu to change from a transparent menu to a sticky menu with white background when scrolling down the page.
Hope I explained well.
Please let me know if you know a way how to tackle this issue.
Best regards,
Max Bayer
-
The header image and menu so far
0 -
the sticky menu when scrolling down the page
0 -
the header menu in brizy
0 -
Hi Maximilian,
Thank you for all these details! Unfortunately but for the theme header, we can't control something more and all depend by the theme do you have installed. What page template do you also have except the Brizy template and the Standard one you already set the page? Do you have the Blank template or Default template? Could you try to change the page template?
Thanks!Best regards,
Sandra0 -
HI Sandra,
ok indeed I foud a way to set the menu from the main themen (The Ken - from Artbees) to be transparrent. So far so good, looks good.
I now set a simple image into a Brizy "row" and the header is floating on top of it as intended. My problem now is that the image, that is loaded in the row does not go fullwidth the way I would need it to. I did set the width setting of the brizy row to "Full width" but still it does not go all the way. Please see the screenshots on how the width looks like in brizy and how it is with the other sites built in Visual Composer and how it should be.
Is there anything else I could to to reach the width needed?
Best regards,
Max
0 -
how it looks in brizy, the image does not start from the left border of the page, althought the row setting is set to full width
0 -
how it looks in a visual composer page with a full width row
0 -
Hi,
That white space can appear from the page template you use. If you use the Default template (or another theme page template) then the page is structured in such a way: theme header, content where is added the container for Brizy page and its elements and the theme footer. In the second part, is added a container where is added the Brizy content, therefore, that white lines/spaces is provided from the theme page template. That space can't be managed from Brizy options or builder. I notice that some of our users tried to add some Custom CSS for this, therefore, you can try the same.
Thanks!
Best regards,
Sandra0 -
Hi Support,
I talked to the developers of the theme. They told me I could try to apply the css code below:
.mk-grid,
.mk-inner-grid { max-width: 100%;
}
If I apply this code to the Custom CSS of the theme it works, but its changing the grid of the whole site, not just the ones where I use brizy. If I add the code to the custom CSS of that particular site before proceeding to edit it with Brizy it does not take any effect and the site is just wide as before.
Is there a way to enject custom CSS to an entire page designed with brizy? I saw there is an element called "shortecode" which lets you introduce some php code to the page. Is there some similar way to add custom CSS to an entire page as well?
Best regards,
Max
0 -
Hi Max,
This CSS code is a global one and if you apply it inside a certain page or in the WP Customizer, it will apply to all pages from the site. You can check the structure of the page when is added is CSS and find a generic Brizy class and add it inside the CSS code you had. Unfortunately, I don't know where is applied these classes .mk-grid, .mk-inner-grid, to suggest you a generic Brizy class. Also, I tried to install the Visual Composer Starter theme but I suppose you use another theme and I didn't find these classes in the code of the pages with the default template. You can send us the URL link of the Brizy page where you have this CSS code and we will try to find the class.
Best regards,
Sandra0 -
Hi Sandra,
thank you for your effort.
the global code I sent you would mean that all brizy pages do get the new grid width, which would be fine. All other pages, like the ones built with Visual Composer should not be affected by this code. Do you know where I could enter the code? If I add it to ther general global CSS of the theme would it affect all Brizy pages?
I also got this code for individual pages:
.page-id-41772 .mk-grid, .mk-inner-grid { max-width: 100%; }
This would be perfect if it could be entered in the custom CSS for one particular page. Do you know how custom CSS could be entered in individual brizy pages? Via an page element? Also how do I find out the page ID of a brizy constructed page?
Best regards and thank you for your support,
Max
0 -
Hi,
This code is a global one but also individual for a certain page, therefore, you can add it in the theme or WordPress Customizer. It will apply only on the .page-id-41772. But make sure that the page id isn't set dynamic because in this case, this code will not help you.
.page-id-41772 .mk-grid, .mk-inner-grid { max-width: 100%; }To find the page-id of the Brizy page, you have to open the Inspect element and find from the body tag the page id. See here.
Best regards,
Sandra0 -
Hi Sandra,
ok I will try this. Could you pls tell me where I can set the page ID to be dynamic or better to check it is set to fixed?
Best regards,
Max
0 -
Hi Max,
Unfortunately, in Brizy pages isn't possible to set custom page Id. They are set randomly and automatically by Brizy editor.
Thanks!Best regards,
Sandra0 -
Hi Sandra,
I was just referring to what you were writing above "...But make sure that the page id isn't set dynamic because in this case, this code will not help you..."
I was not aware that one can set the page id to be dynamic, thats why I asked. But since you now seem to tell me that that the page ID in brizy is set randomly but then stays the same I dont have to worry about your first comment referring to dymanic id right?
Best regards,
Max
0 -
Hi Max,
When you use the Default Page Template the entire structure of the page is set-up from the theme, therefore, the theme set-up the page ID https://jmp.sh/3jfq0tB. For this reason, I mentioned making sure that the theme doesn't set dynamically the page ID. But in most of the cases, the page ID is set statically.
Thanks!
Best regards,
Sandra0
Please sign in to leave a comment.
Comments
16 comments