Question about making the navbar elements the same width as the columns and how to make columns stack ontop eachother

Hi!

  1. I would like to make it so that the navbar elements are the same width as the columns on my site, like this:

    I was able to make this happen with the following code
.header-navbar{
		padding-right: 360px;
		padding-left: 360px; 
		}

the issue is that if the screen-size changes just a little bit the alignment gets ruined and if I use media queries I need 100 of them.

  1. I also would like my title column to stack on top of the Image column on the phone. Like this:
    Computer:

    Phone:
    Mobil

Here is the link to our website https://cheqparkingse.wpcomstaging.com/

Sorry for the inconvenience, but customization is beyond our support scope - it includes fixing bugs and guidance about the available features.

If customizations are required for your site, please try customizing it using the collection of code snippets Search · user:hivepress · GitHub and other developer resources, or consider hiring someone for custom work https://fwd.cx/hLhc73mQCD9R

Ok I understand but I really need help with these customizations. It would help me really much if you could give me a hint on how to solve these issues. I will never ask again about something like this .

I’ve been trying to do something like this myself. I would like the navbar to have the same width as my content, but I cannot quiet get it right.

The closest way I found was something like this (however, it just aligns everything in the center, and doesn’t use the content width.) Try it and see if you like it:

	@media only screen and (min-width: 74.99em){
		.header-navbar__start, .header-navbar__end {
		flex: none;
	}
		.header-navbar {
			justify-content: center;
		}
	
}
  1. Please try this CSS snippet to start but please note that it can require further customization.
@media only screen and (min-width: 75em){
	.header-navbar {
        width: 75.25rem;
		box-shadow: none !important;
	}	
	
	.site-header {
		display: flex;
        justify-content: center;
	}
}
  1. Unfortunately, there is no simple solution for it. If you are not familiar with code customization please consider hiring someone for custom work https://fwd.cx/hLhc73mQCD9R

Thank you so much @yevhen . I appreciate the help!

Thank you for the help also:) @Seegon

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.