[nac2311]

Hi @sakin

My client loved simple catch so much they wanted to upgrade to pro which we’ve done, but the css used in the free version doesn’t seem to work in the pro version. Below is the css that was used in the free version:

#header {
background: none;
background-color: #ffffff;
}

#header #mainmenu {
float: left;
border:1px solid #000000;
border-color:#000000;
/*background-color:#333;*/
background-color:#333333;
margin-top:40px;
position:relative;
width:976px;
z-index:1000;
font-weight: bold;
box-shadow:0 1px 0px #000000;
}

#header #mainmenu ul li a {
border:1px solid #000000;
border-color:#000000;
padding: 0 20px;
display: block;
color: #000000;
color:white !important;
font-size: 15px;
font-weight: bold;
line-height: 48px;
color: #333;
float: left;
}

#header #mainmenu ul li a:hover, #header #mainmenu ul li.current_page_item a, #header #mainmenu ul li:hover > a {
/*background-color: #333333;*/
background-color: #333333;
font-weight: bold;
border-color:#000000;
/*color: #000000;*/
color:white !important;
}

#header-menu ul.menu ul {
box-shadow: none;
width: 105px;
background-color: #333333;
font-weight: bold;
border-color:#000000;
color:white !important;
}

#header #mainmenu ul li {
font-weight: bold;
border-color: #000; }

#header #mainmenu ul li ul {
font-weight: bold;
background-color: #333; }

I also had some css to remove the small text area that says who posted and when.

This was the css that worked in the free version:
#main #content ul.post-by { display: none;}

That stopped working, but I’ve found this code on your forum:
.entry-meta { display: none; }
That css DOES work. Do I simply add .entry-meta to each line?

Here’s the site: http://www.marcomsonline.co.uk

Thanks
Neil

[nac2311]

Oh, I should also mention – I’ve set it up as a child theme 🙂

[Sakin]

@nac2311: Simple Catch and Simple Catch Pro is quite different in structure as Simple Catch used HTML4 and CSS2 technology where as Pro uses HTML5, CSS3 and responsive design technology. That is why the same custom css will not work.

So, in your css change
#header to #branding

change
#header #mainmenu to #branding #access

Change
#main #content ul.post-by to .entry-meta

[nac2311]

Hi @sakin,

Thanks for the response – your help is always appreciated 🙂 That’s kinda worked, but I’ve got a few issues that have appeared since using the new css.

The slider image won’t appear now and the drop down boxes have gone a bit weird. The header bar is also too long (it seems to have extended).

Also, the text in the drop down menus has gone ‘bold’.

Sorry to ask, but how do I fix it?

Many thanks
Neil

[Sakin]

Hi Niel,

For slider, it giving issue as of your menu css. So, you can either add in the following css in “Appearance => Theme Options => Custom CSS” box or fix menu float:
#main-slider { clear: both; }

For menu and color, I recommend you to remove the all the custom css from “Appearance => Theme Options => Custom CSS” box. Then use the color options in “Appearance => Theme Options => Color Options”

Then use other option that’s available in Theme Options panel. Then if you need any additional settings then let me know it in a list. Then I will send you correct custom css. As your custom css is all mixed and lot of wrong coding can be found.

[nac2311]

Hi @sakin,

Thank you so much for your guidance and helpful css.

I’ve used the colour settings as you’ve said and all is (almost) good 🙂

There’s just two things I need to do to the navigation.

1 – make the text in the nav bold
2 – I’d be fantastic if I could have a small red line appear on the bottom of the main nav as a hover feature. see www. crestchic.co.uk to understand what I mean 🙂

Thanks again.
Neil

[Sakin]

Hi Neil,

1. For nav bold, you can add the following css in “Appearance => Theme Options => Custom CSS” box.

#access ul li a {
    font-weight: bold;
}

2. For menu red border, you can add the following css in “Appearance => Theme Options => Custom CSS” box.

#access ul li a:hover, 
#access ul li.current-menu-item a,  
#access ul li.current-menu-ancestor a, 
#access ul li:hover > a {
    border-bottom: 4px solid #d31117;
    line-height: 44px;
}
#access ul li ul li a:hover, 
#access ul li ul li:hover > a,
#access ul li.current-menu-item .sub-menu a:hover,
#access ul li.current-menu-ancestor .sub-menu a  {
    border-bottom: none;
    line-height: 18px;
}

Regards,
Sakin

[nac2311]

Hi @sakin,

Wow! You’re a star (as ever).

I think that’s about me sorted…

maybe just one final ‘ask’ if possible?

How can I get the main nav bar buttons to take up the full length of the slider rather than finishing about three quarters the way across, with the rest of the space filled by an empty box?

Thanks again 🙂

Neil

[Sakin]

Hi Neil,

This type of task is very complicated with responsive design theme. As we need to consider various screen size. I have come up with the following css, I hope it will work fine. Otherwise you need to hire customizer at http://catchthemes.com/hire-customizer/.

You can try adding in the following css in “Appearance => Theme Options => Custom CSS” box.

#access ul li#menu-item-23 { border-right: 0; }
@media screen and (min-width: 768px) {
    #access ul li a { padding: 0 36px; }
}
@media screen and (min-width: 961px) {
    #access ul li a { padding: 0 43px; }
}
@media screen and (min-width: 1061px) {
    #access ul li a { padding: 0 24px; }
}
@media screen and (max-width: 960px) {
    #access ul li a:hover, 
    #access ul li.current-menu-item a, 
    #access ul li.current-menu-ancestor a, 
    #access ul li:hover > a {
        line-height: 36px;
    }
}

Regards,
Sakin

[nac2311]

Hi @sakin,

Thank you again. It kinda does weird things to the nav when viewed onscreen – so maybe it’s best left out.

It’s not mega important to do, just wondered if it was easy 🙂

Thanks anyway – i’ll certainly be recommending your pro templates to other clients!!

You are the best!

Regards
Neil

[Sakin]

Hi Niel,

Sorry, I gave it in wrong order. You can add the following css instead.

#access ul li#menu-item-23 { border-right: 0; }
@media screen and (min-width: 768px) {
    #access ul li a { padding: 0 24px; }
}
@media screen and (min-width: 961px) {
    #access ul li a { padding: 0 36px; }
}
@media screen and (min-width: 1061px) {
    #access ul li a { padding: 0 43px; }
}
@media screen and (max-width: 960px) {
    #access ul li a:hover, 
    #access ul li.current-menu-item a, 
    #access ul li.current-menu-ancestor a, 
    #access ul li:hover > a {
        line-height: 36px;
    }
}

Regards,
Sakin

[nac2311]

FANTASTIC! Thank you so much @sakin.

I have to say that your level of service as the creator of the templates is excellent. I’ve never before had such a fast and helpful service from anyone else!!

Thank you again!
Neil

[nac2311]

Hi @sakin,

Almost there 🙂

Just three small questions… (www. marcomsonline.co.uk)
1 – How can I reduce the large white space between the header area text/logo and the top of the nav bar/slider?
2 – The free theme had a ‘dotty’ effect on the slider, but the pro theme has vertical lines. How do I get the dotty effect back?
3 – Is there a way to have different images set to individual pages in the sidebar – or do I have to have the same for each page?

Thank you so much again,
Neil

[Author]

Posts