[luismarioochoa]

Hello,

I just purchased the theme and would like to do some modifications. Please help

http://luismario.com/

1. Center the Title/Tagline
2. Center the words in the navigation menu
3. Center the mobile menu icon
3. Make navigation background menu color transparent
4. In this page: http://luismario.com/calendar/
I’d like to leave the links with the current orange color, but would like to change regular text color to white and the bold Address, Admission, Venue Phone to #FF0000

Thank you

Luis

[Skandha]

@luismarioochoa: Go to => Appearance =>Customize => Additional CSS and add the following CSS Code.

To center the Title/Tagline

#site-branding, #site-logo, #site-header {
	display:block;
	float:none;
}
.site-title {
	text-align:center;
}

To center the navigation menu

.menu.catchresponsive-nav-menu, #menu-main {
    float: none;
    text-align: center;
    width: 100%;
}
.catchresponsive-nav-menu li { 
float: none; 
}

To center the mobile menu icon

@media screen and (max-width:991px) {	
	#mobile-header-left-menu {
		float:none;
		text-align:center;
	}

	.mobile-menu-anchor {
		display:block;
	}
}

To change the color of the text in calender page as you said

span.gigpress-info-label {
	color:#ff0000 !important;
}

span.gigpress-info-item {
	color:#ffffff;
}

Let me know if this works out.

Regards,
Skandha

[luismarioochoa]

Thank you so much, very nice!

1. You did not include the CSS for making the Navigation Menu transparent. It would be really nice.

2. Although the top mobile navigation icon is now centered, the bottom one shows on the left. Can it be also centered?

3. How to get rid the division line above the footer?

4. Is it possible to make the scroll up icon moveable, (kind of floating) so that it moves down up the page as one scrolls?

Thank you so much

[Skandha]

@luismarioochoa: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

To make the Navigation Menu transparent

.nav-primary {
	background:none;
}

To center the footer menu

@media screen and (max-width:991px) {
	#mobile-footer-menu {
		text-align:center;
	}
}

To get rid of division above footer

#site-generator {
    border:none;
}

I’m afraid the scroll up icon cannot be moved that way.

Let me know if this solves your issue.

Regards,
Skandha

[luismarioochoa]

Very nice!,

1. The division border CSS got rid of one line, but there is still a white line above the footer at the bottom. Can you help me hide it please?

2. I am using MySticky Menu, which seems to be correctly set, but it shows the Site Title sticking instead of the actual menu. Can you help me correct this please?

Thank you so much in advance.

Luis

[Skandha]

@luismarioochoa: To get rid of the white line
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

#mobile-footer-menu {
	border:none;
}

To correctly set primary menu as sticky menu
Go to => Dashboard => Settings => myStickymenu => Change the Sticky Class to .nav-primary and save changes.

Let me know if this solves your issue!

Regards,
Skandha

[luismarioochoa]

Thank you, works nicely!

I am having some issues with the mobile version that does not display as in the desktop mobile simulation.

1. The background image displays differently in different pages (too large) or does not display at all.
In desktop works really nice as it fills the screen and does not moves, but in mobile it moves as one scrolls and it shows too large and distorted. It does not fill the screen. Please try it using a phone instead of the on desktop mobile simulation.

It does not show here:
http://luismario.com/about-me-2/reviews/
http://luismario.com/calendar/

2. Also the bottom mobile menu icon does not work at all, a white screen displays without the actual pages.

Please help me resolve this issues.

Thank you so much

Luis

[Skandha]

@luismarioochoa: You have set a background image with 682px height and width so it does not full cover the screen. So the background automatically gets adjusted when you change the width or height of the screen. And the background on the phone and desktop looks different because their height differs. I think there is little you can do about this.

About the bottom mobile menu
Have you inserted any menu items do the menu? I don’t see any menu items.

Regards,
Skandha

[luismarioochoa]

Thanks,

1. I do not see a recomended background size in your theme instructions then you did not mention it here either. Can you please provided it so that I can implemented and make it work in both destop and mobile?

2. How to make the white box background transparent in these pages:

http://luismario.com/listen/momentos/
http://luismario.com/listen/cimarron/
http://luismario.com/listen/fiesta/
http://luismario.com/listen/fiesta/

Thank you

Luis

[Skandha]

@luismarioochoa: To get rid of white box background
Go to => Appearance => Customize => Additional CSS and add the following CSS

td {
    background:unset !important;
}

There is no recommended size for a background image as such. I think anything around 1920*1080px or smaller with 16:9 aspect ratio would look good for a custom full screen background.

Let me know if this solves your issue.
Regards.
Skandha

[luismarioochoa]

Thank you for the white background solution, it worked.

However, the answer about the background image is absolutely not satisfactory, this is a serious issue with the “responsiveness” of the theme, I changed image to one with 16:9 aspect ratio and your recommended width and high px and nothing happened, so I reverted to the original one. This issue with the theme needs to be resolved ASAP because I paid for responsiveness and responsiveness should apply, other wise there is a misleading issue here on the part of the company. There pages with normal text where the image does not even show. http://luismario.com/about-me-2/reviews/ or http://luismario.com/calendar/ This happens on both iPhones and Androids.

While this technical issues gets resolved on Catch Themes’ end, please assist me with just having the background image showing only in the front pages of phones screens and do not affect desktop and iPad sizes as they display as they should.

Thank you.

[Skandha]

Hello @luismarioochoa, Our themes are responsive as you can see when you switch from a full screen to a mobile view screen the background adjusts itself in the best possible manner. Obviously the background won’t be perfect for all the screen sizes of certain height and width.

Regarding the two pages not displaying in mobile phones I will get back to you on that as soon as possible.
Apologies for the delay.

If you mean to have background only on front pages in mobile screens
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (max-width:500px) {
	body.custom-background:not(.home) {
		background:#000;
	}
}

Let me know if this is what you want.
Regards,
Skandha

[luismarioochoa]

Thank you for looking after, I won’t enter the latest CSS until you come back with a solution for those pages that are not showing the background image as well as a solution for those (most of them) not showing the background image in a descent “responsive” (as the name of the theme claims) form as in this page:
http://luismario.com/listen/momentos/ where it does look good.

Thank you

Luis

[Skandha]

@luismarioochoa: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (max-width: 767px) {
    body.page-id-15.custom-background,body.page-id-3.custom-background {
        background-attachment: scroll;
        background-size: contain;
        background-repeat: repeat;
    }
}

The background was not showing because of the huge content area of those pages.
The above css should solve the background issue in the two pages you mentioned.

Let me know if this works out.
Regards,
Skandha

[luismarioochoa]

Hi Skanda,

This solution only works 50% because the background image repeats instead of being a single one as I need and have set up in the theme. Please give me one that will post a single fixed background image instead, I have temporarily left it on so that you can see how it looks. Thank you

Luis

[Skandha]

@luismarioochoa: Please remove background-repeat: repeat; from the previous CSS Code I provided you check those pages.

Let me know if this works out.
Regards,
Skandha

[Author]

Posts