Hi there.
I am for ever trying to accomplish something with a site of mine.
There is a button and a phone number that have to be attached to the top of the page and a menu that has to be aligned to the bottom of the logo.
I had accomplished this, but then I changed something in the layout builder in the header, where I am using a layout builder to accomplish this, and all the names of the elements changed, and now I can’t seem to change it back to work properly across platfoms.
Some solutions seem to be working for some browsers, but not for others. So the problem is mostly to get it right on different browsers safari/chrome/firefox/explorer.
The site is: arkodesign.nl
The css I’m using to get it done is currently:
#pg-w5cf653c814eb8-0.panel-no-style,
#pg-w5cf653c814eb8-0.panel-has-style > .panel-row-style,
#pg-w5cf653c814eb8-1.panel-no-style,
#pg-w5cf653c814eb8-1.panel-has-style > .panel-row-style {
margin-top: 0px;
padding-top: 0px;
}
/* ruimte boven knop in Safari en Chrome */
#masthead .hgroup #header-sidebar {
-webkit-box-align: center;
-webkit-box-pack: center;
box-sizing: border-box;
display: -webkit-box;
height: 100%;
padding-bottom: 15px;
padding-top: 0px;
position: absolute;
right: 0;
top: 0;
}
#masthead .hgroup {
padding-bottom: 15px;
padding-top: 0;
position: relative;
zoom: 1;
}
/* Padding boven button header verwijdern */
.knopentelnr.panel-row-style.panel-row-style-for-w5cf653c814eb8-0 {
margin: 0px;
padding: 0px;
}
.siteorigin-panels-stretch.panel-row-style-full-width.panel-row-style.panel-row-style-for-w5cf653c814eb8-1 {
margin: 0px;
padding: 0px;
padding-bottom: 5px;
}
/* ruimte boven knop en boven menu desktop aanpassen, naam van panel verspingt bij aanpassingen en moet opnieuw aangepast worden */
#masthead .hgroup a {
padding-top: 20px;
}
.panel-widget-style.panel-widget-style-for-w5cf653c814eb8-0-0-0 {
padding-top: 10px;
margin-top: 10px;
}
Any idea how to get this right?
Thanx in advance!
Kind regards,
Arko
Hi Arko
Thanks for reaching out.
At a row, cell and widget level there is an Attributes tab on the right. If possible, rather insert custom class names and use those in your CSS, that’ll avoid the situation you’ve described with Page Builder structure updating on save.
Unfortunately, customization tasks are beyond what we’re able to support here on the forum. We can assist with limited/small customizations within our SiteOrigin Premium support scope via email. We’re a small company with limited resources, I’m sorry we can’t lend a hand, I wish we could.
Ok, fair enough ;). No problem. I actually sort of fixed it myself by moving all the content to the masthead in stead of the header.
The only thing is, and I hope you can help me with this: The navigation menu I put in the masthead does not collapse to a mobile menu on mobile… I put every setting on responsive and on mobile menu in the customization menu, but it doesn’t seem to work for the navigation menu widget that I put in the Masthead area…. If I put it in the Header area it DOES work.
Any workarounds for this?
Thanx!
Thanks for your understanding.
The challenge is that the theme isn’t set up to locate a menu widget in a Layout Builder and convert it into a mobile menu. Vantage will do that for the main menu or for a menu widget inserted directly into the header widget area. Given that you’ve got the layout where you want it, you might consider using a plugin to assist by adding an additional mobile menu. I’ll try one now and see what can be done.
There are most likely other ways to do this. What I’ve done is install Max Mega Menu plugin. From Appearance > Menus I’ve assigned a menu to the Primary Menu location and set Max Mega Menu to be active for that location. At Appearance > Widgets > Masthead, in the Layout Builder, instead of a Navigation Menu, I’ve inserted a Max Mega Menu widget.
Hope that helps :)