Docs

[piexec]

http://carlson.piexec.com/

I’m currently using the following CSS, but how do I get the links centered vertically in the nav bar, and not top aligned?

.x-navbar .sub-menu a {
text-align: center !important;
}
.x-navbar a {
text-align: center !important;
}

.x-logobar {
background: url(http://carlson.piexec.com/wp-content/uploads/2016/06/tall_spacer.png) center repeat-x;
}
.x-navbar {
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
box-shadow: 0px 1px 0px #846c2b, 0px -1px 0px #846c2b !important;
}
.x-topbar {
text-align: center !important;
}
.x-topbar .p-info {
float: none;
}

.x-topbar .p-info, .x-topbar .p-info a{
font-size:14px!important;
}
.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
box-shadow: inset 0 120px 0 0 #333;

}

.x-navbar {
background-color: #ffa927;
text-align: center;

}
.x-navbar .desktop .x-nav > li > a:hover{
color: #fff !important;
}

.x-navbar .desktop .x-nav > li:last-child > a {
border-right: none;
}
.x-navbar .desktop .x-nav > li > a {
border-right: 1px dotted #333;
padding-top: 5px !important;
height: 25px !important;

}

[Rue Nel]

Hello There,

Thanks for writing in! The top alignment of the menu items can be adjusted in the customizer, Appearance > Customize > Header > Links – Alignment > Navbar Top Link Alignment. But since you added the custom css code, whatever settings you may have in the customizer will no longer work. Please find this css block and adjust the top padding in the css;

.x-navbar .desktop .x-nav > li > a {
   border-right: 1px dotted #333;
   padding-top: 15px !important;
   height: 25px !important;
}

You might also need to adjust the height or use min-height: 25px instead. Hope this works.

[piexec]

http://carlson.piexec.com/

but when I do that, you can see that my background box and vertical pipes don’t move down with it.

[Bell_Lodge]

Hi there

You might change the height: 25px !important; to 50px and see if that helps..

Rick M

NZ

[Christopher]

Hi there,

Yes, thanks @bell_lodge for sharing.

@piexec
Please find this code :

.x-navbar .desktop .x-nav > li > a {
   border-right: 1px dotted #333;
   padding-top: 15px !important;
   height: 25px !important;
}

And update it to :

.x-navbar .desktop .x-nav > li > a {
    border-right: 1px dotted #333;
    padding-top: 15px !important;
    height: 50px !important;
}

Hope that helps.

[piexec]

that works!

Now how do I get this mobile nav button to sit in the middle of the nav bar instead of flush to the bottom?

[Thai]

Hey There,

Please add the following CSS:

.x-navbar .x-btn-navbar {
    margin-top: 10px;
    margin-bottom: 10px;
}

Hope it helps 🙂

[piexec]

This reply has been marked as private.

[Rad]

Hi there,

In your Envira Gallery’s Config, please choose Image size of a thumbnail ( 300×300 ). Then on Ligtbox setting, choose Image size of default.

Thanks!

[piexec]

http://carlson.piexec.com/

Nope, portrait images are still coming through like in a masonry format.

Any ideas?

[Rad]

Hi there,

Actually, the cropping of height is only allowed if the resulting aspect ratio matches the 300×300

Example,

Let’s use this tool as reference, http://andrew.hedges.name/experiments/aspect_ratio/

This is the original image, http://carlson.piexec.com/wp-content/uploads/2016/06/Garage-Door.jpg ( 1179×1172 )

With the tool above, please input 1179 on W1, and 1172 on H1. Since we selected the 300, please input it to W2. The H2 will result to 298.

Since it’s 300×298, there is no need to crop it, right?

Here is the result, http://carlson.piexec.com/wp-content/uploads/2016/06/Garage-Door-300×298.jpg

How about increasing your image’s height a bit? Bigger than the width?

Thanks!

[piexec]

Ok. I see that. How do I get the page navigation to look like this:

http://enviragallery.com/envira/pagination-addon/4/

[piexec]

And how can I get the images cropped to be all “even”?

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

.envira-pagination {
    text-align: center;
}
nav.archive span.page-numbers, nav.archive a.page-numbers, div.envira-pagination span.page-numbers, div.envira-pagination a.page-numbers {
    display: inline-block;
    height: 43px;
    padding: 0 15px;
    line-height: 43px;
    text-align: center;
    text-decoration: none !important;
    margin: 0 10px 0 0;
    color: #808080;
    background: #fff;
    border: 1px solid #e9eaeb;
    font-size: 16px;
}
nav.archive span.current, div.envira-pagination span.current {
    background: #7cc048 !important;
    color: #fff !important;
}

Hope that helps.

[piexec]

That worked BEAUTIFULLY!

[Author]

Posts