We’ve added an editable area to our Full width template, but it’s not working properly. It’s partially obscured by the header. Because of this, if you add blocks to it, it’s impossible to actually mouse over them to select them.
The offending style is here, in our theme’s style.css included in the header and found in packages/dreamrs/themes/theme_dreamrs/css/style.css.
If we change the position to relative, it will look better.
Unfortunately, we probably shouldn’t do this. What if the theme needs that menu to be absolutely positioned? Many themes want this in order to make the menu affix at the top of the browser, for example. We don’t want to get rid of this behavior. What we want, then, is for the menu to be absolutely positioned most of the time, but relatively positioned when the page is actually in edit mode.
So let’s do this. Change the .main_menu class back to position: absolute, and add this to your styles:
html.ccm-edit-mode .main_menu {
position: relative;
}
.ccm-edit-mode is a class automatically added to the <html> tag when the page is in edit mode. This will ensure that the menu is relatively positioned in edit mode, allowing us to access our page areas, but absolutely positioned other times, in order to maintain the original theme behavior.