Couple of questions about the layout

[SebasWub]

Hi there,

I have a couple of questions about designing my website: www.beta.todayisamazing.com

1. When visiting the website in mobile (iOS) the hamburger menu is placed all the way to the right. How can I place the menu a little bit more to the left so that the three lines of the menu are all visible.

2. When visiting the website in mobile (iOS) the phonenumber is white and unreadable, even when hoovered over it doesn’t appear.

3. How can I change the colours of the text and icons in my footer?

4. Is there a way to reduce the gaps between the top menu and the first content without deforming the mobile layout? Especially at the page: Go.Chat.Connect. Online.

5. Where can I find the option to change the topmenu into a ‘sticky menu’ so it moves along with the content?

I hope these bundles with questions are okay to ask. I tried to find the answers in the forum but couldn’t find them.

Regards, Sebastiaan

[ruenel]

Hello Sebastian,

Thanks for writing in!

1. When visiting the website in mobile (iOS) the hamburger menu is placed all the way to the right. How can I place the menu a little bit more to the left so that the three lines of the menu are all visible.
   – This is happening because in X > Theme Options > Layout and Design > Site Width, you have set it to 100%. Please have it updated and only set it to 98% or lower. This will give your space 1% space for the left and right side of the page.

2. When visiting the website in mobile (iOS) the phonenumber is white and unreadable, even when hoovered over it doesn’t appear.
– I could not find the phone number. Which page is it? Meanwhile, you may need to check this out:

• Top Bar Phone Number - Support - Themeco Forum
• Phone # Link Font Color - Support - Themeco Forum

3. How can I change the colours of the text and icons in my footer?
– The colors of the footer when using the Ethos stack are predefined in the built-in CSS. To override this, you need to add CSS code into X > Theme Options > CSS.

.x-colophon.bottom .x-colophon-content {
    color: red;
}

.x-colophon.bottom .x-nav li a,
.x-colophon.bottom .x-social-global a {
    color: red;
}

.x-colophon.bottom .x-nav li a:hover,
.x-colophon.bottom .x-social-global a:hover {
    color: green;
}

4. Is there a way to reduce the gaps between the top menu and the first content without deforming the mobile layout? Especially at the page: Go.Chat.Connect. Online.
– This is because of the top margin of the content area in Ethos stack. You can override this by adding this CSS code into X > Theme Options > CSS.

.x-container.max.width.main .offset{
    margin-top: 0;
}

5. Where can I find the option to change the topmenu into a ‘sticky menu’ so it moves along with the content?
– Please go to X > Theme Options > Headers and set the “Position” to Static Top.

We would love to know if this has worked for you. Thank you.

[SebasWub]

Hi @ruenel,

Thanks so much for your input.

1. The hamburger is replaced, great!

2. The phonenumber is still in white while I visit the site on iPhone. The adress is the following:
   https://beta.todayisamazing.com/over-ons/

3. The icons are white as snow now, thank you.

4. The gap is gone, thanks!

5. The menu is sticky on my desktop, but when on my iPhone it doesn’t come along. Do you know what to do about this?

Regards,

Sebastiaan

[marc_a]

Hi Sebastian,

1.) I can’t see any phone number on this page https://beta.todayisamazing.com/over-ons/, would you point it out using a screenshot?

2.) The header is sticky on the desktop but not on mobile devices because this is how the header sticky works on the X theme and this would require customization if we change it. Regretfully, customization is outside the scope of our theme support. You may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

On the other hand, if you would like to have that functionality without doing any customization, I suggest that you upgrade your X to Pro because in the Pro Header Builder, there’s an option where you can enable the sticky header and it will work on mobile devices. To know how to upgrade your X to Pro, please check this out.

• https://theme.co/docs/converting-from-x-to-pro

Hope that helps.

Thank you.

[SebasWub]

Hi there,

Thanks for the reply again.

1. Here is the screenshot from my mobile deivce, hope you can find a solution for this one.
   

   

2. I’ll try if my own 3rd party can help me out with a way to move the sticky menu.

Regards,

Sebastiaan

[ruenel]

Hello Sebastiaan,

1.) Please check out this article first:

• https://stephenkeable.medium.com/iphone-safari-changing-colour-of-phone-numbers-b79e5139cc06

2.) If you use 3rd party plugin, you may need assistance from the creators of the 3rd party plugin instead. They are more familiar with the plugin and they can give the best advice on how you can use the plugin.

Best Regards.