Full Width header in html

[Algra]

Hi, how can I make the header, topbar and menu "full-width" when the screen is between 1439px and 1200px?

[Luis C]

There are several ways to achieve your goal. You can assign a new class to your header container (If it's based on bootstrap it should be already classed .container) and then write the corresponding media query in your custom.css or global.css depending on your prestashop version.

@media (min-width:1200px) and (max-width:1489px) {
	.myclass 
  	{
		width:100vw;
	}

}

 

[Ress]

Can you post the site link? I think you can get help easier that way.

[Algra]

On 3/18/2022 at 11:00 PM, Ress said:

Can you post the site link? I think you can get help easier that way.

Hi Ress, of course.

http://ap3.agrtrends.com/

[Luis C]

 

This should do it. Use it in your custom.css

 

Style your header elements separately and adjust according to your needs

	@media (min-width:1200px) and (max-width:1439px) {
	#header_primary_container {
      width:100vw;
      margin-left:0 !important;
      margin-right:0 !important;
	  max-width: 100vw !important;
      /* Padding will stay the same so you can have a safe "bleed" from the edges of the browser window */
  }
  
  .st_mega_menu_container > .container {
    margin-left: 0;
    margin-right: 0 !important;
  }
  .st_mega_menu_container #top_extra_container {
    width:100vw;
  }
}

 

[Algra]

On 3/21/2022 at 11:58 AM, Luis C said:

 

This should do it. Use it in your custom.css

 

Style your header elements separately and adjust according to your needs

	@media (min-width:1200px) and (max-width:1439px) {
	#header_primary_container {
      width:100vw;
      margin-left:0 !important;
      margin-right:0 !important;
	  max-width: 100vw !important;
      /* Padding will stay the same so you can have a safe "bleed" from the edges of the browser window */
  }
  
  .st_mega_menu_container > .container {
    margin-left: 0;
    margin-right: 0 !important;
  }
  .st_mega_menu_container #top_extra_container {
    width:100vw;
  }
}

 

Perfect, thank you!