[yinglin1202]

Hi,

I am using the Simple Catch Responsive and I am trying to change two things
First, I want to put the options on menu evenly spread on the menu bar, instead of clustering on the left.
Second, I want to get rid of the dots at the bottom of the slider.

How can I change these in CSS?

Thank you!

[Sakin]

@yinglin1202: I am bit confused with theme are you using it. Are you using Simple Catch theme or Catch Responsive Theme. Please post in your site URL.

[yinglin1202]

It is the free version, so I guess it is Simple Catch.
here is the link http://www.billlowrylab.com/
Thanks！

[Sakin]

@yinglin1202: But your site is Password protected.

[yinglin1202]

sorry I changed it. it should work now

[Sakin]

@yinglin1202:
1. You can make that menu center, I hope this works fine for you. Evenly spread is not possible in dynamic menu. So, try adding in the following css in “Appearance => Customize => Theme Options => Custom CSS Options” box:

.nav-primary.search-enabled .menu {
    text-align: center;
    width: 94%;
}
.nav-primary .catchresponsive-nav-menu li, {
    display: inline-block;
    float: none;
}

2. To hide the slider dot, you can add the following css in “Appearance => Customize => Theme Options => Custom CSS Options” box:
#feature-slider .cycle-pager { display: none; }

[yinglin1202]

Thanks Sakin! it works well. Another question is that how can I delete the gap above the menu? I have tried to change the margin but it wont work. Thanks

[Sakin]

@yinglin1202: You can add the following css in “Appearance => Customize => Theme Options => Custom CSS Options” box:
#masthead { padding: 0; }

[yinglin1202]

Problem solved! Thank you so much Sakin!

[Sakin]

@yinglin1202: Thanks and if you like Catch Responsive theme and support, then please support it by providing your valuable review and rating at https://wordpress.org/support/view/theme-reviews/catch-responsive?rate=5#postform

[yinglin1202]

Hi, I have another question for the formatting. How to change the height of the menu bar? and what if I want to change the font?

Thanks again

[Sakin]

@yinglin1202: To increase the height of the menu bar, you need to increase the line-height in the following CSS and then add it in “Appearance => Customize => Theme Options => Custom CSS” box.

.catchresponsive-nav-menu a {
    line-height: 46px;
}

About the font change, either you need to upgrade to pro and you will have font family options where you can choose from popular google fonts and web safe fonts. If you want to stick with Free version, then you either need to use font plugin or build child theme and add google fonts.

Font css will be as below:

.catchresponsive-nav-menu {
    font-family: "Open Sans",sans-serif;
}

[yinglin1202]

Hi, I have tried these code
.catchresponsive-nav-menu a {
line-height: 46px;
}
but it only changes the menu button, not the grey bar outside.

[Sakin]

@yinglin1202: Ok then add the following css as well:

#search-toggle {
    height: 41px;
    line-height: 41px;
}

Note: Sorry for the late reply as we are still in state of emergency due to massive earthquake in Nepal. Internet, electricity, water and sanitation are huge problem here. We are also helping others in the community so we are slowing getting back online.

[Author]

Posts