Split Menu Header, Logo Styling

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

Comments

  • 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!
  • edited 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.

    image

  • Sorry, the url for the site is: http://www.cheriisthebomb.com/
  • 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.
  • edited 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 ?

  • Hi,

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

    Thanks
  • 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.

  • 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;
    }
  • edited 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
  • Hi,
    We do not have an option for scrolling offset, sorry

  • 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.
  • 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;
    }
  • 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)

  • 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%; }
  • edited April 2017
    It's good enough . Thank You very much. 


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


    is it possible ? 
  • I cannot even click on your responsive menu. Do you have any third party plugins installed?
    please disable them.
  • edited 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 :(
  • 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
  • ok. Done
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.