Navigation menu on mobile

Support
#1

Hey there,

Hope you guys are doing all right!

I have a question about the look of my mobile menu.

At the moment, it looks like that :

Is there any way to make it appear just on the right of the logo as a simple menu icon, without this kind of shadow thing going on top of the logo?

Thanks for your help. :slight_smile:

#2

Hello @Fuzuki,

Thanks for asking. :slight_smile:

You can add following CSS to make necessary changes in mobile menu:

.ubermenu-skin-vanilla.ubermenu-responsive-toggle {
    background-color: transparent;
    float: right;
    margin-top: 30px;
}

.ubermenu-skin-vanilla.ubermenu-responsive-toggle:hover {
    background-color: transparent;
}

Thanks.

#3

Hey there,

Thanks a lot, looks great! Just got two more questions for you if you don’t mind:

  1. Is there anyway to fix the navbar on mobile too? On desktop, the navbar always stays on top but it doesn’t on desktop.

  2. And I’ve got another slight issue abouthe navbar :

At the moment, it does look like that :

And I would like to make it look more like that :

So what I’d want is to have more space under the logo for it to be centered inside of the navar, and the menus to be aligned with the middle of the logo. Is there a way to do that?

Thanks a lot!

#4

Hello @Fuzuki,

Thanks for updating thread. :slight_smile:

  1. Can you please elaborate your first question as I am quite confused with the same?
  2. Please add following CSS under X > Theme Options > CSS:

.x-navbar.x-navbar-fixed-top {padding-bottom: 20px;}
.ubermenu {margin-top: 20px;}
.ubermenu-search {margin-top: 15px !important;}

Thanks.

#5

Hey there!

Thanks for your quick help. :slight_smile:

  1. When I scroll down the page on desktop, the navbar stays visible, as you can see here :

But when I scroll down on mobile, it disappears :

And… I would like it to stay visible when you scroll down on mobile too. :slight_smile:
Tell me if that’s clear enough!

  1. Perfect! Thanks a lot!
#6

Hi there,

Please add this code in the custom CSS:

@media (width: 979px) {
    .x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
        position: fixed;
        z-index: 1030;
    }
}

Hope this helps.

#7

Hey there,

Doesn’t seem to work, and did cancel the space under the logo as it was before.

Any idea? Thanks :slight_smile:

#8

Hi there,

My apologies, please try:

@media (max-width: 979px) {
    .x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
        position: fixed;
        z-index: 1030;
    }
}
#9

I added it thanks! Doesn’t change from before though?
Thanks!

#10

Hi there,

I have checked the contents of your global CSS and it did not work because there are some CSS errors in the codes. Please try to keep the codes in the global CSS organized and neat so that it will be easy for you to maintain it and to avoid incorrect CSS syntax such as having stray CSS blocks just like what you have previously. Also, please avoid adding new CSS blocks in random parts of the code.

To check for CSS errors, you can copy and paste your code here: http://csslint.net/

I have gone ahead and fixed the CSS issues in your code and the main navigation area should now scroll through on mobile.

1 Like
#11

Oh wow thanks a lot that’s awesome! Really really nice of you, many thanks.

I didn’t know about all of that, still got a lot to learn… but thanks, I’ll look into it and try to understand the whole structure of it better. :slight_smile:

Many thanks again and have a great day/night!

1 Like
#12

You’re welcome! :slight_smile:

#13

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