Need to adjust the menu slightly

C-Lo · December 2015

Hello,

I've installed BeTheme at http://ImmanuelMarketing.com. I've managed to get the logo to a reasonable size, but I can't seem to get the menu where I want it. I've tried for hours without success. I need to move the menu items and contact us button down, so that they are aligned with the bottom of the logo. And then to centre the menu items and contact button below the logo on smaller screen sizes, rather than the contact button being off to the left, and the menu items being aligned left, which doesn't look right.

Please help. I can send images if needed.

Albert · December 2015

Hi,

to move the menu items and contact button down, please use below css:

#Top_bar .menu_wrapper { margin-top: 40px !important; }
.header-classic #Top_bar .top_bar_right { top: 40px !important; }

But if you want to center contact button on mobile devices, please use Top Bar icons under Theme options > Responsive section.

Thanks!

C-Lo · December 2015

Hi, thanks for getting back to me, but this css does not work with the sticky header... the menu items end up being outside of it when the user scrolls on the page. Also, at the smaller screen sizes, such as on smartphones, the contact button ends up hidden below the slider.

Albert · December 2015

Would be much better if you can send us screenshot with necessary changes for better understand because we are confused now.

C-Lo · December 2015

Sure, I was thinking that would be easier, but don't see an option to do so here. How do I do that here? Is there an email address?

Albert · December 2015

You don't need any option, because you can use any external look like http://pasteboard.co/

C-Lo · December 2015

Alright, very good. Links below.

What I'd like to do is as follows:

1. Move the links down at the higher screen size, so they are level with the bottom of the logo. See http://pasteboard.co/6Lwcjep.png

2. The links should also move down at the mid-range screen size. See http://pasteboard.co/6LGCuuv.png

3. The action button is really oddly placed at the smallest screen size. I'd like it to be centered. See http://pasteboard.co/6LKy2qt.png

4. I'd like the menu items to also be centered. See http://pasteboard.co/6LRZC8z.png

Using the css you provided looks good at the larger screen size without scrolling. See http://pasteboard.co/6M243zK.png

But it creates a problem with the location of the links in the sticky header. See http://pasteboard.co/6MbqQbT.png

Furthermore, the alignment of the action button and the menu are not aligned at the mid sized screen layout. See http://pasteboard.co/6Mkm1oq.png

And at the smaller resolution, I.e. for smartphones, the action button, ends up hidden below the slider. See http://pasteboard.co/6MGTeGN.png

Albert · December 2015

1. This can be done with below css:

@media only screen and (min-width: 768px) {
    #Top_bar.is-sticky #menu > ul { margin-top: 30px !important; }
    .header-classic #Top_bar.is-sticky .top_bar_right { top: 30px !important; }
}

2.

#Top_bar a.responsive-menu-toggle { top: 58px !important; }

3. This button can be centered with Top Bar Icons option under Theme options > Responsive section.

4. As we see, menu items are already centered.

C-Lo · December 2015

Hi,

Thanks for getting back to me.

1. This works fine at the higher screen size, but it ruins the sticky header so that the links appear below the sticky header area... http://pasteboard.co/8egvxZX.png

2. Works great. Thanks.

3. Centerring the button using the function described does center the button, but the button gets pushed below the slider image at the smallest screen size. Please try again. http://pasteboard.co/8eseM74.png

Albert · December 2015

1. Sorry, you're right about that. Supposed to be :not(.is-sticky) instead of .is-sticky:

@media only screen and (min-width: 768px) {
    #Top_bar:not(.is-sticky) #menu > ul { margin-top: 30px !important; }
    .header-classic #Top_bar:not(.is-sticky) .top_bar_right { top: 30px !important; }
}

3. Yes, the button is centered already what you can see on http://pasteboard.co/8YJL0If.png but if you would use the css we gave you above, the button should not be pushed below the slider.

C-Lo · December 2015

Seems to be working. Thank you very much!

Albert · December 2015

You're welcome

C-Lo · December 2015

Hi there, I have just one more request.

The horizontal bar that appears when hovering over the menu items and when on the particular page is a bit off now, hovering above, now that the menu has moved. See http://pasteboard.co/iaddr33.png

I'd like it to be below the menu items as in the example at http://pasteboard.co/ianRGVg.png

The following seems like it should work and yet does not.

media="all"

#Top_bar .menu > li > a:after { bottom: 0px; }

What am I missing?

Albert · December 2015

You can move this hover line with the following css:

#Top_bar .menu > li > a::after { top: 86px !important; }

C-Lo · December 2015

Thanks!

C-Lo · December 2015

Ooops, we're almost there...

The top bar is out of place now on the sticky header... http://pasteboard.co/lQIxLMB.png

It should line up as when the sticky header is not in play.

Albert · December 2015

If the problem is with sticky header only, please use below css instead of what we gave you above:

#Top_bar:not(.is-sticky) .menu > li > a::after { top: 86px !important; }

C-Lo · December 2015

All good now. Thanks again!

Albert · December 2015

You are welcome!

Need to adjust the menu slightly

Comments