Menu bar showing different width on different screens

Hey Ross

We don’t officially support customisations, we do our best to help out with small ones. I can help with the requests from your other thread but it’s a bit too much to try solve those challenges with your Custom CSS in place. I’m then troubleshooting on two fronts, the theme’s CSS and your customisations. If you can email through a temporary set of login details to :

[email protected]

I’ll jump in as soon as possible. I’ll temporarily remove your Custom CSS, make the change and put it back, you can then decide what to use and not to use.

The logo issue on mobile issue for example, you’re using static widths for the logo size, that’s causing the problems you’re seeing on smaller displays.

So, happy to help, but please send some details through so I can take a look with default CSS to start with.

There were some direct changes made to style.css. I removed the ones I could see. Take a look:

http://rossgardens.co.uk/

Let me know what you need from here.

Logo looks good on reduced browsers size and on iOS Chrome. Please try refreshing several times or clearing browser cache or using private browsing mode.

I turned caching off during this phase. Once we’re doing head to your caching plugin’s first page to enable caching again.

Hey Ross! Thanks for the wait. Mmm, we shouldn’t be battling so much with a simple layout like this. Let me try switching over to the boxed layout and making a change to the logo for the full width look. Back in a sec.

So yeah, let me know if you’re happy with the above. I’ll try dive into your questions after that. Basically, I changed the layout to Boxed from Full Width which makes this all much easier. I then changed the logo area to match the site width area. I also cropped your logo so we can rather handle the logo spacing with CSS. All is viewable under Appearance > Custom CSS :)

Sure, I’ll take a look now. I’m basically trying to solve that list of problems at a higher level.

Under Appearance > Custom CSS I’ve added two comments that read:

/* Site Width Control Point */

Those two px values must be the same. You now have the power to set your site width without changing Page Builder columns. So to take over from here what you’d need to do is page by page, delete the extra columns. The use Appearance > Custom CSS to set your site width as required if you don’t like 746px.

How I did that on the home page was just to create two new rows without the extra columns and the drag the widgets into the new rows, then delete the old rows. Very quick.

Hey Ross, glad that helped a bit.

1. The Vantage menu unfortunately isn’t designed to fill the available space, menu items are statically spaced. If you’d like to change that spacing, head to Appearance > Custom CSS and edit the following selector:

.main-navigation ul li a {
  padding-right: 20px !important;
  padding-left: 20px !important;
}

2. This property is unfortunately not valid, rather remove it:

padding-bottom: -20px;

The best way to resolve this would be to add:

#main { padding-top: 0; }
.home #main { padding-top: 35px; }

3. Sure, try the following:

@media (max-width: 680px) {

/* Vantage center align the main menu */

.main-navigation ul {
font-size: 0;
text-align: center;
}

.main-navigation ul li {
display: inline-block;
float: none;
font-size: 13px;
}

.main-navigation ul ul li {
text-align: left;
}

}

Notes: The following is a comment in CSS:

/* I am a comment, I don't do anything, just for info purposes */

When adding new CSS try add comments as you go, or place new CSS within sections I’ve already commented. Makes it easier to come back at a later stage and understand what’s going on.

Hey Ross, yeah no problem, glad we could help.

I lose track sometimes but I think you added this section:

.main-navigation ul li a {
  padding-right: 30.5px !important;
  padding-left: 30.5px !important;
}

@media (max-width: 680px) {

/* Vantage center align the main menu */

.main-navigation ul {
font-size: 0;
text-align: center;
}

.main-navigation ul li {
display: inline-block;
float: none;
font-size: 13px;
}

.main-navigation ul ul li {
text-align: left;
}

}

Just a few notes there:

* As far as I know half pixels don’t work.

* If you scroll up a bit you’ll see a menu section that I created with a comment. There is already a selector there for menu padding and another for menu padding below 680, those will both be overwritten by the 30.5px added later.

* The center align menu CSS that’s been added is only applicable below 680px. Was that intentional? If so, perfect.

Here is what I recommend:

1. Remove this:

.main-navigation ul li a {
  padding-right: 30.5px !important;
  padding-left: 30.5px !important;
}

Scroll up to /* Menu */ and rather edit the padding there. I’ve got padding general and then padding below 680. Mobile should go onto two lines once you remove the 30.5px.

Perhaps put/move the following just above /* Main */ so it’s in the menu section. Easier to see what’s going on that way (can you tell I’m a little OCD :) )

@media (max-width: 680px) {

/* Vantage center align the main menu */

.main-navigation ul {
font-size: 0;
text-align: center;
}

.main-navigation ul li {
display: inline-block;
float: none;
font-size: 13px;
}

.main-navigation ul ul li {
text-align: left;
}

}