Few days back, I created and updated this thread, but didn’t get any response:
I have another question in addition to the previous one.
1. How can I put a full width item inside boxed layout? My website design is boxed layout but footer is full width. I also need a full width middle section and above the footer section on the homepage. Please see below screenshots:
Full Width Middle section (require only on homepage):
https://www.dropbox.com/s/cly794f94tqc8xz/01-full-width-home-middle-strip.png?dl=0
Boxed Content Area (sitewide):
https://www.dropbox.com/s/bcnwqlz4yvrrp8s/02-boxed-content-area.png?dl=0
Full Width above the footer section (require only on homepage):
https://www.dropbox.com/s/szis755mx46c0zo/03-full-width-home-above-footer-section.png?dl=0
Full Width Footer (sitewide):
https://www.dropbox.com/s/2o6jheav7vxnmn5/04-full-width-footer.png?dl=0
2. Where can I find the list, usage and some examples of Vantage Hooks/Filters?
P.S. I am working locally so I can not share any link.
May I have any feedback here?
Hi Kashif
Apologies for the late reply here.
1. If you’re using Page Builder to create your site, then using a full-width layout row. Are you using Page Builder? If so, I can point you in the right direction.
2. Unfortunately, we don’t have full developer documentation available at the moment. If there’s anything specific you’d like to change we can let you know which hooks and filters to use.
Thanks for the update. I have found the option and made middle and above the footer sections full width. How can I make footer full width?
I found following piece of code in the header.php:
<?php do_action('vantage_before_page_wrapper') ?>I want to place an image on top and bottom of the page. I think using these hooks/filter is the proper way to do it.
Also, I want to hide some of the items for mobile devices like we have
classes in bootstrap. How can I do this with Vintage?
Hi Kashif Rafique
If you’re using the boxed layout and would like a full width footer, try the following under Appearance > Custom CSS:
/* Vantage Boxed Layout With 100% Footer */ body.responsive.layout-boxed #page-wrapper header#masthead { box-sizing: content-box; margin: 0 auto; max-width: 1080px !important; } body.responsive #page-wrapper { max-width: 100%; padding-top: 0; } #main-slider { margin: 0 auto; max-width: 1080px; } #main { margin: 0 auto; max-width: 1080px; } #colophon { margin: 0 auto; max-width: 100%; } #colophon #footer-widgets { margin: 0 auto; max-width: 1080px; }To hide items on mobile you can use media queries, for example, to hide the entire header on mobile you’d say:
@media (max-width: 680px) { #masthead { display: none; } }That’s an example of what you can do with media queries.
Thanks for the quick response. Your given code worked for me.
Waiting for your response about following:
I found following piece of code in the header.php:
I want to place an image on top and bottom of the page. I think using these hooks/filter is the proper way to do it.
Sure. You could use that action hook as follows:
function vantage_child_top_banner(){ echo '<div class="top-banner"></div>'; } add_action('vantage_before_page_wrapper', 'vantage_child_top_banner');Then use Custom CSS to target your newly added div and add a background image and other necessary properties to it.
PHP goes in child theme functions.php file. CSS goes in Custom CSS or style.css file of child theme.
Hi again,
I want to reduce site width from 1080 to 960. I found a code snippet on following link:
Thread: Change The Width Of Boxed Layout
/* Vantage Boxed Layout Site Width */ body.responsive #page-wrapper { max-width: 960px !important; }Things were working good until I put above code in my child theme css file. Now footer is not full width.
Hi.
wraps everything, including the footer. Try removing your last Custom CSS added and check the first Custom CSS I sent. Change all the 1080px values to 960px.
Thanks for the prompt response. It worked!
Is there an easy way to change the color, hover color and background of the menu, sub-menu and menu items? I want to use:
– main menu: transparent background
– sub menu: white background with 0.8 opacity
– hover background main menu item: light brown background
– hover background sub menu item: transparent background
I tried Menu in Customizer, but there is no option to use transparent background.
Sure.
Vantage main menu opacity and hover opacity:
/* Vantage Menu Opacity */ .main-navigation { background: rgba(255,0,0,0.3) !important; } /* Vantage Hover Opacity */ .main-navigation ul li:hover > a { background: rgba(255,0,0,0.8) !important; }For drop downs:
/* Vantage - Adjust color and opacity of drop down menu items and drop down menu hover */ .main-navigation ul ul { background: rgba(200, 54, 54, 0.5) !important; } .main-navigation ul ul li:hover > a { background: rgba(200, 54, 54, 0.5) !important; }Adjust my rgba figures with yours.
Ref: https://www.google.co.za/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=rgba%20generator
This is a private message.
This is a private message.
Thanks for the update. I have fixed the horizontal bar as per your given suggestion. However, now horizontal bar is visible just for 768px to 986px resolution. I have checked every line of code, but unable to find the culprit. Could you please help here?
Sure.
Try going to Settings > SiteOrigin Page Builder, change the Responsive Layout to 980, that should help.
Thanks for the quick response. I have set Responsive Layout to 980, but still horizontal bar is appearing for that viewport size.
To confirm, Page Builder has it’s own breakpoint. Can you check that you went to Settings > Page Builder and checked that setting. Not to be confused with Appearance > Theme Settings > Navigation > Mobile Menu Collapse.
Thanks! It makes everything in working condition.
What will be required to do for responsive collapse working at native 768px?
This is a private message.
This is a private message.
Thanks again for the detailed response.
So, if I remove my settings & customization via customizer and revert back to the defaults, then Block 1, 2, 4 & 6 will be removed?
What will be required to do for responsive collapse working at native 768px?
For sure.
2 and 6 are added the by the Customizer.
1 will be added if you active the mobile menu in theme settings.
3 and 5, you’d need to check, I think that’ll be there if there are any widgets in the footer widget area.
4 needs to stay, Page Builder takes a performance knock if it doesn’t use inline styles, it’s the best way to handle it’s rendering. It used to be optional but the setting was removed.
Thanks again for prompt response. I will update this thread after reverting back to defaults. Currently we are in the development phase so these inline styles are fine, but when we will go in the production, we will look into removing these inline style for better performance & cache.
I would also like to know what shall I do to make responsive collapse working at native 768px?
Sorry, not quite following your question. The responsive menu collapse has a setting under Appearance > Theme Settings > Navigation.
Page Builder has a responsive setting under Settings > Page Builder.
For any other collapse points you’d need to locate the CSS block in question, copy the block from the theme’s stylesheet into Custom CSS and change the media query point there.
I want to center align the widgets. How can I do it? 1 row is standard while the second one is full width.
Hi. Please send a link to the page concerned and we’ll take a look. Thanks.
This is a private message.
Thanks Kashif, glad to see our new Private Reply useful for something :) Definitely handy for urls. Sorry for not requesting this earlier, please could you indicate which widgets we’re looking to align on your home page. Thanks.
Full width rows are under the slider and above the footer. I have tried to do it and successful but I am not sure whether it is the right approach or not. Previously I use following code to center:
Sorry for being slow here. Everything looks centered on my side. Is the content not centered on your side or is this an example for another situation?