Navbar menu vertical alignment and x-btn starting screen width

Support
#1

Hi All,

I got rid of the idea that I’d ever be able to have a sticky responsive image above the navbar and changed to a regular inline navbar. I know when to give up and walk away. This should be a small ask…

http://screencast-o-matic.com/watch/cbQ3huIZxo

Force navbar text and button to v-align to the botton
You’ll see in the video that, as the viewport gets narrow enough that the nav menu items change to the x-btn (replaced with text), the button tries to v-align itself to the top of the navbar until the logotype gets in the way and it drops down to the bottom of the navbar. How to I v-align it to the bottom at all times?

The letters DS, TL and TP just show the current screen-size breakpoints. It starts at Desktop Large (no letters) and ends at phone (no letters), but the Emerging Scenic Designer image pops up when it hits the phone-only section.

Change the breakpoint where navbar menu items become the x-btn
I can get all the way down to Tablet Landscape on an iPad (in the portrait orientation) and still have room for the four menu words. What’s the @media method to control when the words become the button?

Restore the desktop submenu horizontal alignment
I had it working (actually, YOU had it working :grinning:) when I was using the stacked navbar, but now it has reverted way too far to the left. I still have
/* Indent desktop submenu */
.desktop .sub-menu a{
text-indent: 30px;
}
but the text won’t indent.

Thanks as always.

#2

I fixed the submenu indentation after looking around in Inspector, but please look at this and tell me whether I accidentally messed up anything else:

/* BEGIN Shift desktop submenu to the right */
.masthead-inline .x-navbar .desktop .sub-menu {
left: 0px;
right: auto;
}

.desktop .sub-menu a{
text-indent: 15px;
}
/* END Shift desktop submenu to the right */

#3

Hi there,

To force the Explore text to align to the bottom of the header you need to add the CSS code below to X > Launch > Options > CSS:

.x-btn-navbar.collapsed {
    position: absolute;
    bottom: 0;
    right: 0;
}

It is not recommended to change the viewport thresholds as it may cause unexpected problems in other sections of the theme. Would you please kindly give us more detailed information? Maybe we can give an alternative solution.

Thank you.

#4

Thanks Christopher,

I added padding-left: 500px; to the end of your code above to force the Explore button below the logo text.

How about this without me wrecking anything messing around with viewport sizes:

At 767px screen width and below,

  1. Center x-btn (Explore)
  2. Center x-brand.text
  3. Allow for x-brand-text font size adjustment (to let me make the font small enough to keep the text on one mobile row)

At 768px screen width and above,

  1. Display desktop nav menu aligned right as it is now
  2. x-brand.text stays aligned left as it is now

I also notice that clicking the desktop Portfolio submenu dropdown icon correctly displays the submenu, but clicking it again doesn’t cause the submenu to disappear. The icon on mobile causes the submenu to appear/disappear, but I might have done something to break it on the desktop.

I changed from Stacked to Inline navbar and I think some of my css addresses just stacked elements. I’d like remove the 1px white border below the navbar both at page refresh and after scrolling down and back to the top of the page.

Thank you!

#5

Hi There,

By default, when using Inline Navbar, Brand text/Logo and the menu are on the same line/ROW. When the space is not enough, to display both of this element in just one ROW, the menu goes down. Either we reduce font size of the logo or reduce spacing between links on Theme Options > Header > NAVBAR TOP LINK SPACING (PX)

See this: https://screencast-o-matic.com/watch/cbQO1QIuiF

@media (max-width:767px){
    a.x-brand.text{
        text-align:center;
        float: none;
        font-size: 20px;
    }
    .x-btn-navbar{
        float: none !important;
        text-align:center;
        right: initial !important;
    }
}

Remove the 500px left padding. That is not good especially for responsive nature.

Do you have customization on the menu? By default dropdown should show on hover and hide accordingly.

#6

Thank you Lely,

It’s almost there to give a nice look on desktop and mobile. Thanks for the video; I hadn’t been using some of the Inspector’s capabilities. That should help me understand what’s happening in the future.

The only menu tweak I need now is a way to set the navbar/x-btn break point. This is great on a phone:

and this is great on medium and large desktops:

But on the 768px-wide portrait-oriented ipad display, this happens:

How do I tell the navbar to turn into the centered x-btn at the same display size the logo text centers using your code above? There is plenty of room on the 768px display to show the full navbar, and I need both the logo to center and navbar to turn into x-btn when the display becomes less than 768px wide.

Would I be better off going back to a stacked navbar and forcing left logo alignment and right desktop navbar alignment on displays larger than 767px wide? Just an amatuer thought.

#7

Hi,

You can try chaing 767ps to 979px.

eg.

@media (max-width:979px){
    a.x-brand.text{
        text-align:center;
        float: none;
        font-size: 20px;
    }
    .x-btn-navbar{
        float: none !important;
        text-align:center;
        right: initial !important;
    }
}

Hope that helps.

#8

That made the logo center and navbar collapse at the same point, which is great. Thanks.

They both happen when the viewport goes smaller than 980px, though. I need that transition to happen when the viewport goes down to 767px.

Now how do I tell it to display the brand on the left and full navbar all the way down to 768px? I need the left brand and full navbar when the view is set to 768-979 like below.

#9

Hi There,

Please note the current setup is the most ideal on your site. If we will adjust the menu switch on 768px, main menu will go on two lines because it will not fit on just one line. Try the following:

@media (min-width: 768px) and (max-width: 979px){
   .x-nav-wrap.desktop {
      display: block !important;
   } 
   .x-btn-navbar.collapsed {
     display:none !important;
}
a.x-brand.text {
    text-align: left !important;
    float: left;
    }
}

See this: https://screencast-o-matic.com/watch/cbQueeIvxq

#10

Thanks, Lely. Ok - I’ve been beaten into submission :grinning:.

#11

Hey,

You are welcome!