Navigation Customization

Support
#1

How do I make the main navigation total space smaller?

I would like to keep my navigation menu text center, but have the total amount of space on either side smaller.

Also is it possible to have the menu transparent, but once someone scrolls with the mouse add 50% transparency?

#2

Hi,

To achieve that, you can add this in Theme Options > CSS

/* adjust navbar container */
.x-navbar .x-container.width.max {
    width: 88%;
    max-width: 1200px;
}

/* navbar background */
.x-navbar {
   background-color:transparent;
}

.x-navbar.x-navbar-fixed-top {
   background-color:rgba(255,255,255,0.5);
}

Hope that helps.

#3

I see what happened, but It’s not making the space from top and bottom smaller in the nav bar.
It’s making it smaller from right to left.

#4

Hello @MichaelAnthonyMurray,

Thanks for updating thread. :slight_smile:

To reduce top and bottom spacing you will have to adjust padding values. Can you please share website URL so we can give the correct CSS?

Thanks.

#5

http://ri.ventures

#6

Hello @MichaelAnthonyMurray,

Thanks for sharing website URL. :slight_smile:

Please add following CSS under X > Launch > Options > CSS:

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

.x-navbar .desktop .x-nav > li > a {
    padding-top: 20px;
    height: 60px;
}

.x-brand {
    margin-top: 10px;
    height: 60px;
}

.x-navbar-inner {
    min-height: 60px;
}

Thanks.

#7

I’m sorry that didn’t work.

If you scroll down then come back up you will see a space.

Also it only decreased the space from the menu to the top. Not the total space.

The trouble is shrinking the logo text and the navigation menu at the same time.

#8

Hi,

Lets try it again, kindly do the following.

  1. Add this in Theme Options > JS 
jQuery( function($) {
    $(window).scroll(function(){
        if ( $(this).scrollTop() <= 0) {
          $('.x-navbar').removeClass('x-navbar-fixed-top');
        }  
    });
});
  1. Add this in Theme Options > CSS 
.x-navbar.x-navbar-fixed-top {
    background: rgba(255,255,255,0.8);
}

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

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
    height: 50px;
    padding-top: 20px;
transition: all 0.5s ease;
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
    min-height: 50px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
    margin-top: 5px;
}

.x-navbar-static-active .x-navbar.x-navbar-fixed-top .desktop .x-nav > li.x-menu-item-woocommerce > a, .x-navbar-fixed-top-active .x-navbar.x-navbar-fixed-top .desktop .x-nav > li.x-menu-item-woocommerce > a {
    padding-top: 10px;
}
#9

WORKED!

Thank you so much!

#10

You’re welcome! :slight_smile:

#11

I did notice something this morning.

http://ri.ventures

The masthead menu is below the fold.

Is there any way to make sure the masthead/navigation is at the bottom of the screen when the page loads?

Otherwise you don’t even see the navigation until you start to scroll.

#12

Hi There,

Please type .masthead on the increase/decrease full height screen as on the image below:

Hope it helps!

#13

I don’t thin that is the right screenshot, but I believe I found the right place on the page.

Can you confirm I did it correctly?

However on the mobile phone [iPhone 7] the masthead is now about 3/4 blocking the screen.

Fixed one thing I think but broke another?

THANK YOU FOR ALL YOUR HELP!

#14

Hi There,

You are corrected, that wasnt the correct screenshot, I had Photoshop set to png and didnt realize it did not overwrite the previous file which was jpeg which I usually use.

Here is the correct image.

Hope it helps

#15

The masthead is on the screen but now it’s too high.

On the mobile phone [iPhone 7] the masthead is now about 3/4 blocking the screen

#16

Hi,

Try adding a fixed value instead.

eg. 90px (height of your navbar)

Hope that helps

#18

Hi There,

Your credentials no longer work.

Please add .masthead and provide login credentials so we can take a closer look.

Thanks!

#19

See above note. I believe that is the correct credentials.

#20

Hi there,

It should be okay now, please check how I added .x-masthead, #wpadminbar, .x-navbar. As for a reminder, please update your X theme as well if you’re going to update your cornerstone. Else, you shouldn’t update your cornerstone if you’re not planning to update your X theme. You can delete the current cornerstone and let the theme install the compatible version by visiting the overview page.

Thanks!

#21

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