Sticky menu issue

rarch47 · January 2015

Hi there,

I have a "wee" problem.

I have edited the menu css to give it extra height to fit my logo and also to set a top margin on the menu links to horizontally align it with the logo by adding the following code:

/* MODIFY THE HEIGHT OF THE LOGO BANNER SECTION TO ACCOMODATE THE LOGO */

div.logo h1 a, div.logo a {height: 115px!important;}

/* MODIFY THE TOP MARGIN OF THE MAIN MENU SO IT LINES UP WITH LOGO */

div.menu_wrapper {margin-top: 25px}

It's kinda messed up my sticky menu here at my testing server: http://in-style.com.au/kawana/

Is there anything I can do to modify the sticky menu to move the menu links up around 10-15px or so?

Thanks

Albert · January 2015

Add below css before your custom css:

#Top_bar:not(.is-sticky) { your code here }

This means that css will be applied not for sticky menu.

rarch47 · January 2015

Wow! that worked pretty well. Thanks for that. I don't think i have come across CSS like that before. Almost looks like SASS or LESS (precompiling).

One drawback. it kinda put me back where I started and the logo gets hidden by the top of the slider because the container element is not high enough.

http://in-style.com.au/kawana/

Is there still something I can do without messing up the sticky menu settings? I implemented your code as follows:

#Top_bar:not(.is-sticky) {

/* MODIFY THE HEIGHT OF THE LOGO BANNER SECTION TO ACCOMODATE THE LOGO */

div.logo h1 a, div.logo a {height: 115px!important;}

/* MODIFY THE TOP MARGIN OF THE MAIN MENU SO IT LINES UP WITH LOGO */

div.menu_wrapper {margin-top: 25px}

}

Albert · January 2015

But can you explain what is still wrong and what you want to do?

rarch47 · January 2015

Ok, I will try to make it more clear. I wish I could talk Polish to you he he....

I will include a screenshot for reference:

Can you see how the logo is being hidden underneath the slider? I just want to make the element that holds both the menu and the logo have more height so the complete logo shows and also not have it affect the way the sticky menu appears.

Albert · January 2015

This is what we thought but we would like to be sure so we can avoid confusion. So in this case you must increase logo height, with below css:

#Top_bar #logo { height: 110px; }

If you want, you can also move menu, cart and search so can sit in the same line as logo. And this can be done with below css:

#Top_bar .menu_wrapper { margin-top: 20px; }
.header-classic #Top_bar .top_bar_right { top: 20px; }

BTW We do not use Polish language on this forum

rarch47 · January 2015

Awesome!

But the logo still gets clipped a bit at the bottom because your theme only seems to like logo with small height:

http://in-style.com.au/kawana/

Any way to modify so the logo does not clip?

PS - the sticky menu still does not look right.

Albert · January 2015

Above css must work for logo as well as we tested it. We checked your website and we do not see code that we sent above. Where did you pasted this css?

About sticky menu, if above css applied for sticky as well, then use below css before:

#Top_bar:not(.is-sticky) { 
    .top_bar_right { top: 20px; }
    .menu_wrapper { margin-top: 20px; }
 }

rarch47 · February 2015

I am sorry I have not responded in a while.

I am using a Child Theme and putting the CSS in via Appearance > Editor.

Here is a copy and paste of the whole lot:

/* Theme customization starts here

-------------------------------------------------------------- */

#Top_bar:not(.is-sticky) {

.top_bar_right { top: 20px; }

.menu_wrapper { margin-top: 20px; }

}

#Top_bar:not(.is-sticky) {

/* MODIFY THE HEIGHT OF THE LOGO BANNER SECTION TO ACCOMODATE THE LOGO */

div.logo h1 a, div.logo a {height: 115px!important;}

/* MODIFY THE TOP MARGIN OF THE MAIN MENU SO IT LINES UP WITH LOGO */

div.menu_wrapper {margin-top: 25px}

}

/* MODIFY THE MARGIN TOP OF THE GOOGLE MAP ON FOOTER WIDGET */

div.google-map-wrapper {MARGIN-TOP: 6PX;}

/* CHANGE THE COLOUR OF THE COPYRIGHT FOOTER TO DARK GREY */

div.footer_copy {background: #333;}

ul.breadcrumbs.woocommerce-breadcrumb {color: #FFFFF1!important;}

#Top_bar #logo { height: 110px; }

#Top_bar .menu_wrapper { margin-top: 20px; }

.header-classic #Top_bar .top_bar_right { top: 20px; }

Sorry but it still does not work for me on my end. I don't know how to make the above text formatted as code in this visual editor, so please excuse me.

Albert · February 2015

Maybe it does not work because you have some errors in css code above? For example no spaces between values and !important declarations.

rarch47 · February 2015

Ok I will have to have a good look at the code.

Does it look right (besides the !important declarations, i was lazy)

I've just gotten a bit confused with the code now and think i have made unnecessary extra code (i.e. #Top_bar:not(.is-sticky) { is declared twice).

I'm willing to ditch the sticky menu altogether if I can just allow extra height in the header area where the logo goes. I mean how do people insert square or portrait logos into this theme?

Albert · February 2015

For us code looks fine except !important declarations. How logos you exactly mean? Please show us what you exactly want to do and we'll see what we can do for you.

rarch47 · February 2015

Yeah my !important declarations are just lazy/sloppy quick fixes. I intend to be more specific with css selectors at a later stage.

I think the best thing I can do at this stage is just send you of a screenshot of the site that I Photoshopped so I could put a bigger logo in (not having it restricted/cut off by preset dimensions/constructs within your theme).

So I have made the menu white space about 20px higher or so. I am willing to disable sticky menu altogether as I don't think it will fit easily within my customisation. Unfortunately the client wanted a big fat logo that looks more like graphic art than a logo but we gotta give them what they want....

Screenshot is below. Thank you for your patience.

Albert · February 2015

So if you want to increase just header section, please use below css:

#Top_bar { height: 150px; }
#Top_bar #logo { height: 110px; }

rarch47 · February 2015

Ok that seemed to work well. But what is clipping my logo still? Is there a function running in the "upload logo" section of the theme settings that sets the logo to a specific size and clips it if it goes over a certain height?

That's the problem I have now.

Albert · February 2015

We have checked your website and you did not used the css we mentioned above because if you will paste both lines, then everything will be fine and logo will show in full size.

rarch47 · February 2015

Yeah i just tried fiddling around with the custom css and I didn't have any luck with it. Keeps getting cut off at 90px height.

rarch47 · February 2015

Sorry but I have put the css you have provided into the styles.css of the child theme using the WP editor under Appearance > Editor.

yeah you are right, I went into firebug and could not see the styles at all. Do you recommend I put them into the Be Theme parent theme? I'm just worried about upgrading the theme files now. this is why its good to use child themes and do extra php or css customisations there.

rarch47 · February 2015

mmmm I just put !important declarations on the css and it worked. It looks like I will have to edit the css you provided to make if more specific (thus avoiding the naughty !important declarations).

Albert · February 2015

Maybe you have similar code somewhere else and that's why only with !important declarations you are able to do it.

rarch47 · February 2015

yayyy. Time for some CSS debugging. I have used very little custom css and I'm very sure I have not written any conflicting CSS statements. I got the feeling that Be Theme's CSS is overriding the custom css. But I will have a play with it anyway and get on with it.

Appreciate all your help.

do widzenia

Albert · February 2015

Maybe you missed something and that's why it does not work without important declaration. But of course is this declaration works, then all is ok.

Sticky menu issue

Comments