Header with Hamburger Menu using Divi and Custom CSS


I'm a bit stumped as I'm trying to make my mobile device headers using the Divi Builder and CSS Grid or Flex.

So far I'm trying to create the tablet version to have a three column style about it. The Left side of the header will be the logo, in the middle some header text and on the right will be the hamburger menu.

The problem I'm facing whether I use CSS Grid or Flex is that the header text and logo when the device size changes on browser it loses its position rather than sliding on a horizontal axis? Whereas my mobile hamburger menu follows an x-axis (Horizontal).


i have a problem with the css rule display: flex. Well to be honest, the problem is with the Mozilla FireFox browser. Every other browser displays the page as i intend it to display, but with firefox thereĀ“s a problem.
I have a container with the class of promo that holds tree colomns with the class of coluna.

The CSS is as folows:
.conteudo .promo {
max-width: 100%;
flex-flow:row wrap;
.conteudo .promo .coluna{
width: 30.3333%;
padding: 5px;

Syndicate content