Move mobile navbar to "stacked" from "inline"

Support
#1

I am currently working my way through customising my site and am using Icon with a ‘fixed top’, and inline navbar because I want the header to be sticky including the logo.

Ideally, I would like to keep the menu inline next to the logo when in desktop view but the mobile nav button to appear centered under logo like when stacked OR inline with the logo but very close to it and not far on the right side.

Also, I want the logo more left and the navbar to closer to my logo when on desktop, say almost centered on the page.

Is this doable with custom CSS?

Many thanks,

Felix

#2

Hi Felix,

Please try adding this custom CSS under X > Theme Options > CSS:

@media (max-width: 979px){
    .masthead-inline .x-btn-navbar {
        float: none;
        display: block;
        width: 44px;
        height: auto;
        margin: 0 auto;
        clear: both;
    }

    a.x-brand {
        float: none;
        margin: 0 auto;
        text-align: center;
    }
}

Can you send us with your website URL so we can take a closer look?

Thanks.

#3

Hey Thai,

thank you for your quick reply. Yes of course.

Since I’ve changed to use inline instead of stacked, the “Nothing to show right now” placeholder text disappears behind the header unless I set navbar top height to 160 px. Is that normal?

http://felixschuermann.de/

#4

Worked like a charm. :hugs:

Also, I want the logo more left and the navbar to closer to my logo when on desktop, say almost centered on the page.

Is there also a solution?

#5

To fix it, please add this custom CSS:

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
}

Try adding this custom CSS:

@media (min-width: 980px){
    .x-navbar-inner .x-container.max.width {
        max-width: 100%;
        width: 100%;
    }

    nav.x-nav-wrap.desktop {
        float: left;
    }
}

Let us know how it goes!

#7

Hi there,

Please change this CSS block

    .x-navbar-inner .x-container.max.width {
        max-width: 100%;
        width: 100%;
    }

to this

.x-navbar-inner .x-container.max.width {
    max-width: 990px;
    width: 100%;
}

And I don’t see any grey bar in the footer. Would you mind providing a screenshot?

Thanks!

#9

Ok what is wrong here?

I’ve added a secondary link to my menu / navbar and it doesn’t work properly.
I wanted to add “Preise” (Pricing) to my Infos and now it looks like this.

I’ve never had such problems with any Theme before :confused:

#10

Hi There,

You are having the impression that your navbar is changing sizes because there is no border or shadowing or color difference to divide the background color of your navbar with your body color.

Your navbar background is white and so is your body. The first section is set to have 45px padding top on Cornerstone and it seems once your site loads that this is part of your header but it is not, so once you scroll down it looks like your header got smaller but actually you scrolled pass the padding of the first section.

I could not replicate the Preise issue, can you clarify? Have you removed it?

I just want to remind you, if you are looking to build more complex headers I would suggest you upgrade to PRO Theme.

You can go to your Apex License page and pay the difference and not full price for the theme.

Pro offers amazing header and footer builder which are unmatched by any WP Theme and will allow you to build flexible, complex beautiful headers code free.

Hope it helps

#13

Hi there,

Our default theme header does not have the problem you are mentioning which the submenu goes up. I suggest that you change the Child Theme to the Parent Theme and check the case also you will need to remove all the CSS and JS customization to have the normal view.

Also, you should be able to set the height of the navbar section by going to X > Launch > Options > Header:

If you still have problems after doing the steps mentioned above kindly get back to us with the URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Kindly open up new threads for additional questions about the Footer as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

#14

Thank you Christopher.
I’ve removed all css customization from the css bar and have switched back to the Parent theme.
The submenu problem is still there.
It would be great if you had a look. It’s really stressing me out.

#15

As I’ve deleted this fix, my first section disappears behind the header again.

#16

Hi,

To fix this, you can add the code below in Theme Options > JS

jQuery(document).ready(function($){
    $(window).scroll(function(){       
      if ( $(this).scrollTop() == 0 ) {
          $('.x-navbar').removeClass('x-navbar-fixed-top');
      } 
    })
});

No need to add the CSS Code.

Thanks

#17

That doesn’t work

#18

I’m deleting this Theme now. Very disappointed.

#19

Hi There,

We are sorry to hear but note that the issues your installation presented are due your own customizations and not the theme itself.

As I suggested previously using PRO would be a better choice to achieve what you are trying to do and all could be achievable code free.

Let us know if you change your mind and need further assistance.

Thank you

#20

I’ve removed all the customizations and still it won’t work. It is not true that this is all my fault.

I switched back from the Child Theme to the Parent Theme and removed the few lines of code in the css and still it wouldn’t work properly.

#21

Hi There,
I can see you are not using X any more!
Can you please confirm if you still need help on your issue. I can try to help you fix your issue if this is some thing not out of our theme support scope.

Thanks

#22

Thank you for your kind offer but X is not what it promises to be. There have occured too many problems for way to basic functions. I’ve switched to another Theme and requested a refund.

#23

Hello There,

Okay no problem. We understand your situation.

By the way with regards to refunds;
All sales are handled through ThemeForest, and their parent company Envato handles all refund requests. You can read more about their process here

Best Regards.

#24

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.