[Simon Haywood]

Hi There!

I’m loving the Catch Kathmandu theme. I’ve done a lot of CSS customisation already, but I’ve drawn a blank on the last few things I need to do. Can you help?

My site is: http://www.castle-view-apartment.co.uk/

Here’s what I need:

I need the header menu to always be full width of the page – just like the footer menu.

I need there to be no white space between the top menu, and the slider/featured image.

I need the caption on the slider to either be wider, or responsive (so I don’t roll onto two lines).

The responsive width/text size and padding of both the header and footer menus are not playing nicely with my menu text (easier if you just take a look, you’ll see what I mean). I need to tweak the responsive break points – or the text size/padding in those @media queries so that the menu never rolls on to two lines.

Thanks!

[Simon Haywood]

Hi!

So, I did some more playing….

I’ve got the header menu to be full width – but I can’t get the menu items to be evenly distributed horizontally – like they are in the footer menu.

I messed with padding in the #main, #featured-post, and #hgroup-wrap – and got the result I wanted – which was to get rid of excessive white space between the featured image and the header menu.

Maybe I’m not so concerned about the width of the caption! But, any ideas appreciated.

I still can’t fix the responsive roll onto two lines for the menus. I know this will be an easy tweak if you’re familiar with the css…

Thanks!

[Sakin]

Hi Simon,

For 1 and 2 points related to menu and spaces between menu.
For Header Menu: I see that you are using Primary Menu. To make it like footer menu, you need to select that menu location as Secondary Menu from “Appearance => Menu => Manage Locations”. Then you can hide your primary menu from “Appearance => Theme Options => Header Options”, check in “Disable Header Right Sidebar” and save changes. You can see in our demo page, http://catchthemes.com/demo/catch-kathmandu/ . The Header Top Right menu is Primary Menu and the Header Bottom menu is Secondary Menu.

For 3rd one: you can add the following css in “Appearance => Theme Options => Custom CSS” box.

@media screen and (min-width: 961px) {	
    #main-slider .entry-container {
        width: 400px;
    }
}

Regards,
Sakin

[Simon Haywood]

Thanks Sakin, I appreciate your help!

I switched the menu as you suggested. It did give exactly the result I was looking for – but unfortunately it disappears at narrow screen widths with the responsive design. In the end, I used the media query clue you gave to tweak the CSS to adjust the font sizes at various screen widths, and give 100% width on the primary menu.

I used the same technique to deal with my line-wrap issue on both menus.

Thanks for your support.

Simon

[Sakin]

Hi Simon,

For that menu to work in responsive design. You need to enable it from “Appearance => Theme Options => Responsive Design”, check “Enable Secondary & Footer Menu in Mobile Devices” and save changes.

Regards,
Sakin

[Simon Haywood]

Hi Sakin,

I had missed that option! Thanks for pointing it out, and thanks for your support.

Best wishes

Simon

[Author]

Posts