Split Menu Header, Logo Styling

cnatalino · November 2015

I am currently using the Split Menu Semi-Transparent Header option and have added custom CSS to adjust the logo height (found this code to add on your discussion board).

I like the way the logo overhangs the menu, so it drops below the menu bar.

I am wondering if there is a way for the header to behave the same way if I choose just "Split Menu" (NOT semi-transparent, so the sliders get pushed underneath the menu, but the logo would still hand over the slider). If I try using that header option, the logo gets cut off. Not sure if this is doable but I would LOVE it if you could let me know if there is a way.

The site is currently at: http://www.cheriisthebomb.com/

This is the third time I have purchased and used Be Theme. Huge fan!!!!

Thanks in advance,
Cheri

Albert · November 2015

Hi Cheri,

please show us on screenshot what exactly you want to do so we can have a look on it. We would like to avoid confuse as we are not sure about what you mean.

Thanks!

cnatalino · December 2015

When I choose "Split Menu" as the header type in theme options the logo gets cut off.
When I choose "Split Menu Semitransparent" the logo is positioned over all other elements.

- I want the sliders and page subheaders to be pushed UNDER the navigation bar (which is how it behaves if you use "Split Menu"). However,
- I also want the logo to hang over all other elements (which is how it behaves if you use "Split Menu Semitransparent)

This screenshot shows what happens to the logo when the "Split Menu" header is selected.
You can view the site to see how it looks with "Split Menu Semitransparent" header selected.

cnatalino · December 2015

Sorry, the url for the site is: http://www.cheriisthebomb.com/

Albert · December 2015

As we see, you have a slider on Shop page now but on Service page we found how Subheader looks like. So basically, if you want to move the subheader down, please use below css:

#Subheader { padding-top: 180px !important; }

However, we see that you sorted logo position already because logo does not hide behind subheader anymore.

Abelson · March 2017

Sorry, i don't want to create new topic. My issue is simmilar.

I would like to make menu items closer to the logo (both sides) how can i do that ?

example on screen below.

the gap around the logo is to big. Can i make it smaller ?

http://imgur.com/MbftZ60

Bryan · March 2017

Hi,

Could you please provide us with a link to your page?

Thanks

Abelson · March 2017

http://frangos.pl/

also i would like to ask you to help with "GALERIA" anchor. I used section custom id to scroll page to this secion but it is bit to high. I would like it to scroll exactly to the slider (no white block from previous section on top).

Sorry for my english.

http://imgur.com/10cBHEC

Bryan · March 2017

For the anchors to work correctly you must set the one page option when editing the page. It is under the muffin builder.

For the menu use this css, paste it in theme options>custom css&js>css

.header-split #Header #Top_bar .menu-main-menu-left {
	text-align:right !important;
}
.header-split #Header #Top_bar .menu-main-menu-right {
	text-align:left !important;
}
.header-split #Header #Top_bar .logo {
	margin-right:-20px !important;
	margin-left:-20px !important;
}

Abelson · March 2017

It's already set to one page and its working fine . But i this exact section (GALERIA) i would like it to "land" bit lower so the previos section is not visible. Is it possible ? ( http://frangos.pl/#galeria ) - exactly here.

After using above css in the rigth place nothing changed. This gap is the same as eariler.

Appreciate you support

Bryan · March 2017

Hi,

We do not have an option for scrolling offset, sorry

Abelson · March 2017

OK Thank You.

And how about the gap arround logo? Is there anything else i can to do to make it smaller ?

previous css didn't work at all.

Bryan · March 2017

Delete that css and use this one:

.header-split #Header .top_bar_left .menu_right {
    text-align: left  !important;
}
.header-split #Header .top_bar_left .menu_left {
    text-align: right !important;
}

Abelson · April 2017

It is bit smaller but the gap is still to big.

It would be great if i could make it as small as possible (like on the screen below)

http://i.imgur.com/NFM1j9k.png

Albert · April 2017

To move menu items as close as possible, you need to decrease logo width and instead instead split menus. To do this, please use the following css:

.header-split #Header .top_bar_left .logo { left: 43%; width: 14%; }
.header-split #Header .top_bar_left .menu_left { width: 43%; }
.header-split #Header .top_bar_left .menu_right { width: 43%; }

Abelson · April 2017

It's good enough . Thank You very much.

Abelson · April 2017

Last css was great, but now i need to change mobile version (last two menu option to the right)

http://imgur.com/BqCfpRN

is it possible ?

Bryan · April 2017

I cannot even click on your responsive menu. Do you have any third party plugins installed?
please disable them.

Abelson · April 2017

i have only plugins that comes with theme installed. What else could cause it ?

edit: it seems that it is clickable on phone size window but not on bit bigger one...I don't know why

Bryan · April 2017

Please be so kind and send us WordPress dashboard access privately thru contact form which is on the right side at http://themeforest.net/user/muffingroup#contact and we will check what might be the reason. Please don’t forget to explain what is your problem when sending the message

Abelson · April 2017

ok. Done

Split Menu Header, Logo Styling

Comments