KLEO Mobile Menu Icon & Content Width Configuration

[asdimoro]

Hello Support,

I did look through your forum and saw some dated answers, so I wanted to get updated information. Additionally, I am not too familiar or comfortable with CSS, so I didn’t want to proceed with anything that broke the theme.

Mobile Menu Icon:

On the mobile version of the website, the menu icon appears on the homepage (white and easy to see) but this disappears on inner pages such as Members, Activity, etc. How do I change this color universally? I attached some screenshots.

I attached screenshots

HomePage Content Width:

For my homepage, TwitchUniverse.com, I used the ‘Get Connected’ Template  and simply made some tweaks. I love how the main area (imagery, login, register) of the page is Full Width, but the content below is stretched out too far. I want this to be more boxed for better appearance. You can see how this is on my homepage as it is LIVE.

How can I address this?

Regards

Attachments:

You must be logged in to view attached files.

[Kieran_SQ]

Hi,

Thanks for contacting us about the issues you’re experiencing. I have looked at your site and I can that is no colour set for the bars that make up the mobile toggle. Whether this is from malformed custom CSS or a plugin conflict I am not sure. To rectify this please add the below custom CSS to your KLEO Child theme’s style.css via WP Admin > Appearance > KLEO Child > Style.css. If you’re not using the KLEO Child theme then you can add this CSS via WP Admin > Theme Options > General Settings > Scroll to: ‘Quick CSS’.

COPY CODE

.header-color .navbar-toggle .icon-bar {
    background-color: white !important;
}

Additionally you may wish to set a background colour behind the toggle bars, if you do, you can use the below CSS

COPY CODE

.kleo-mobile-switch button.navbar-toggle {
    background-color: #171717;
}

It looks like you have set the row that houses those elements to not be an inner container. Click the pencil icon for the row (not the column) that houses the elements in question. When the edit modal opens on the ‘General’ tab scroll down to ‘Inner Container’ and set yes. This will stop the row going full width. I have attached a screenshot for to visualise this for you.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

Attachments:

You must be logged in to view attached files.

[asdimoro]

Hi Kieran,

Thank you for the quick reply. I appreciate it and it’s a welcomed change from what I am used to in regards to support with other themes.

The CSS worked perfectly and the mobile menu is now visible on all pages.

However, when I went in to address the homepage full-width issue I noticed that the ‘Inner Container’ was already set to ‘Yes’ for both Rows that I need centered.

Could this perhaps be ‘Template’ set as ‘Full-Width’? I’m not sure what else could be conflicting here.

Let me know any thoughts and thank you for your attentiveness and help

[Kieran_SQ]

Hi,

Setting the page full-width only removes the sidebar and not the margins so it shouldn’t affect anything with regards to the actual width. I can’t tell from the front-end but do you have a row element within a row? If so try checking the row that it resides in to see if that is set to ‘Inner Container > No’.

If this isn’t the case please could you update this ticket, in a private reply, with some temporary admin credentials so I can check out the page on the back end.

Always happy to help 🙂

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[asdimoro]

This reply has been set as private.

[Kieran_SQ]

Hi,

I have been playing around with a test page on your site for some time now and I cannot seem to find the cause of this odd behaviour. I’m going to refer this to one of our developers for review. They’ll be in touch with you via this ticket as soon as they can, Monday to Friday, East European Time.

Thank you for your continued patience,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[asdimoro]

thanks Kieran!

[Radu]

Hi,

1. The menu icon issue, it’s displayed for me on all pages

2. You can do that in two ways or you add padding for the form container in visual composer or you add this css in quick css in theme options -> general settings

COPY CODE

@media(max-width:600px) {
    .home form#register_form {padding:0 20px;}
}

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[asdimoro]

Hi Radu,

Thanks for the response. I added the CSS and nothing changed on the homepage in regards to the content area width issue. It still stretches out to fit the whole screen. You can see on the homepage as I have kept the code active in the CSS

[Radu]

Hi,

Maye you have a cacher or something cuz on my side i see that in effect

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[asdimoro]

Hi Radu,

I see the proper spacing for the content at the bottom of the page, it centered everything it needed to, but the padding at the top (for the big image on the homepage) is much bigger now. It now requires scrolling down when at one time it fit on one screen.

Sorry for the delayed response, was very busy with this project marketing.

Let me know your thoughts.

Regards

[Radu]

Hi,

That’s because there it’s a gap element

You can set hidden for mobile devices from responsive settings from visual composer -> gap element

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts