I’m using concrete 9.3.5 with @Xanweb business theme but I have an issue with mobile view of the header and menus. I want to use transparent header on desktop view but not on mobile/tablet. With mobile view the transparent header extends behind the drop down menu so you can see the page content behind the menu, which makes it difficult to see the menu topics clearly. Also the topic font is black and I want to change that too.
In dev tools I can’t find where to add/change css in mobile view. How does concrete change from desktop to mobile view and where do I look to make changes.
so…I eventually found the css which styles the header.
div.ccm-page .cr-header--transparent.cr-header--full-header .cr-header__wrapper {
background: transparent;
border-bottom: none;
z-index: 199;
}
so I added the following custom css
@media (max-width: 998px) {
div.ccm-page .cr-header--transparent.cr-header--full-header .cr-header__wrapper {
background: #0b2b66;
border-bottom: none;
z-index: 199;
}
}
This works, the @media make the new css conditional on the browser window size. The header remains transparent above 998px but becomes soild colour below 998px which seems to work well for tablet and mobiles.
1 Like