Hello Victoria,

Thank you for your help, it is much needed and appreciated!

What works: When the webpage is at larger desktop resolution and smaller mobile resolution, the logo size and padding looks great.

What doesn’t work:
1. At the medium in-between resolutions for tablets and larger devices, the logo becomes big with not enough padding.
2. The logo also jumps to the left with all the menu items appearing on the right changing its intended behaviour.
3. The logo appears not to be in the center of the page and the padding is larger on the left of the logo, creating more space between the logo and the first three menu items when centralised.

Here is the screenshot showing examples of what I mean https://i.postimg.cc/D0cTk1DY/Logo-Resize-Padding.png

I appreciate any assistance in making the logo scale down gracefully keeping its size and padding proportions, and fixing the logo centralisation and padding issue.

Here is the code I got from another forum post to centralise the logo. The code also includes yours.

Thank you so much!

@media only screen and (min-width: 780px) {
/*In the below code nth-child(x) the value of x should be half the number of total menu items*/
#header .av-main-nav li:nth-child(3) {
/* Adjust the width of the logo */
margin-right:200px;
}

#header .main_menu {
/*background: gold;*/
width: 100%;
left: 50%;
transform: translateX(-50%);
}

.av-main-nav-wrap {
left: 50%;
transform: translateX(-50%);
}

#header .logo {
left:50%;
transform: translateX(-50%);
z-index:999;
}

#header .logo img {
top: 50%;
transform: translateY(-50%);
max-width: 140px;
}
}

/* Header menu items */
#header .avia-menu-text {
font-weight: normal;
}

/* Centre align Copyright socket text */
.sub_menu_socket {
display: none;
}
#socket .copyright {
text-align: center;
width: 100%;
}

/* Make logo appear smaller on mobile and tablet resolutions */
@media only screen and (min-width: 780px) {
#header .logo {
left: 50%;
transform: translateX(-58%);
z-index: 999;
}
}
@media only screen and (max-width: 767px) {
.responsive .logo img {
width: 50%;
}
}

/* Constraining image sizes in lower resolutions */
@media only screen and (max-width: 767px) {
.avia-image { max-width: 50% !important; }
}

Thank you very much Josue, Andy, Yigit, and Elliot!

You guys have all been really helpful, I appreciate it :-)

Kind regards,

Andreas

Hi Yigit,

I tried this and it doesn’t seem to display the button still on landscape (iPhone 6 Plus)

Also, in reference to the code shared by Elliot earlier to restrict the size of images, can I get it to target only specific images, because at the moment it’s shrinking the logo and squashing the Google map too.

Thanks! :-)

• This reply was modified 9 years, 10 months ago by ruthnapal.

Hi Elliot,

* Request: Reduce width of large images at lower resolutions / landscape *
In landscape mode on the iPhone 6 Plus, images still look really huge (it’s fine in portrait mode). Can images be constrained so the images are smaller at this size too? This is how it looks in landscape on iPhone 6 Plus https://www.dropbox.com/s/admaczue2f6ttw1/image%201.png?dl=0

* Request: Have logo stick to bottom of header at all resolutions *
The logo still floats from about iPad size until it snaps to the mobile size where the menu disappears. Can the logo remain touching the bottom of the header section at all resolutions? This is it floating at the moment: https://www.dropbox.com/s/sz1dmb4gg6ogvxi/image%202.png?dl=0

* Request: Centre align logo when mobile header activates *
When the menu button appears, the logo also still is left aligned, could it be centre aligned? https://www.dropbox.com/s/c1fwh0br2bnuyfo/image%203.png?dl=0

Thanks for your help Eliot :-)

Andreas

One final question if you don’t mind, is there anyway to make the white playhead in the centre of the overlay symbol larger, to make it a bit more obvious that it’s a play symbol?

Here’s what it looks like at the moment: https://www.dropbox.com/s/t9c0k4y4ebzcgil/Small%20Playhead%20Icon.png?dl=0

Thanks! :-)

Hello Josue,

This code appears to have fixed the issue. Thank you and Yigit for your help with this!

Have a great day :-)

Kind regards,

Andreas

Devin, Ismael, thank you both very much, Your suggestions worked a charm!

Wishing you both a lovely weekend :-)

Andreas

Ah, as soon as I said that, I refreshed and all is well, the underline only appears now when a link has been clicked!

Brilliant work Josue, right, I think it’s time I let you rest a bit now! Thanks once again :-)

Kind regards,

Andreas

Hi Josue,

I have a final request if you don’t mind. As the behaviour currently is, when you load the homepage, ‘Sell your home quickly’ is selected by default. Is there any way to have it so none of the links are underlined blue until they have actually been clicked? I don’t suppose there’s a way for the page to detect when you scroll past an anchor link, activating the blue underline for each section automatically as you scroll past it? No worries if the second or first parts aren’t possible, it’s more of a casual aesthetic thing.

Thank you :-)

Kind regards,

Andreas

Hi Josue,

I placed the code at the very end of avia.js and the links still appear not to stay underlined when clicked. I reset Safari, emptying the cache too, and appears to still not work. I also disabled ‘WP Super Cache’ Plugin, is that what might be something that’s stopping it from working?

Any ideas?

Thanks!

Kind regards,

Andreas