How to change navigation layout?

Ken · 2018-09-17 19:59:37

I upgraded from BL1 to BL2. The upgrade caused the navigation layout to change. The navigation menu was left aligned with the masthead. After upgrading to BL2, the navigation menu is left aligned with the page. How can I go back to my BL1 layout, where the navigation menu aligns with the masthead? I can not find a control for aligning the navigation menu. There is a padding control for the masthead, but no such control for the navigation menu.

rod barbee · 2018-09-17 21:41:00

Navigation > Horizontal Navigation > Text Align

Ken · 2018-09-17 21:43:02

I have a custom CSS that worked in BL1 to add border and padding. I have this enabled under Custom Stylesheets in BL2. But it is not working.

Ken · 2018-09-17 21:47:02

My Navigation setting doesn't have Horizontal Navigation. My Navigation, Header has text align, but this does not control padding and does not allow me to align the navigation so it is flush left with the masthead.

rod barbee · 2018-09-17 22:02:08

Ken · 2018-09-17 22:56:43

Rod, My BL2 Navigation settings are not the same as yours. My settings only has the first two settings that yours shows and then below that it is completely different. I took a screen shot, but do not know how to include it in the post.

Last edited by Ken (2018-09-17 22:57:05)

rod barbee · 2018-09-17 23:00:10

to include a screenshot: http://community.theturninggate.net/vie … hp?id=7046

Ken · 2018-09-17 23:00:22

Rod, I sent you an email with the screen capture of my navigation settings.

Ken · 2018-09-17 23:02:58

here it is

Last edited by Ken (2018-09-17 23:03:26)

rod barbee · 2018-09-17 23:03:15

also, you're still using an Okapi based template. That might make a difference in what you see. Look under Navigation Header

Ken · 2018-09-17 23:04:11

What is a Okapi based template? How do I change my template to something else?

rod barbee · 2018-09-17 23:09:37

Okapi templates are the original Backlight templates, up to version 1.2.3 I believe.

You won't be able to change your existing template to the newer Pangolin template features. Instead, you'll need to create a new template. Choose Pangolin Page for type when creating a new template.

You can stick with your current template though if you wish. The navigation text align controls are under Navigation, Header

Ken · 2018-09-17 23:18:12

Even using Navigation, Header does not allow the navigation menu to be aligned with the masthead text. Left align just aligns the navigation menu with the left page edge. It doesn't give a padding setting, which is why I including padding in the CSS script (see below). This all worked under BL1, but not under BL2. Is there anyway to align the navigation so it is flush aligned with the masthead?

* remove discount in shopping cart */
p.discount-p {
display:none;
}

/* adds top and bottom border to header */
nav {
border-top: 2px solid lightGrey;
border-bottom: 2px solid lightGrey;
padding-left: 72px;
}

/* adds border to the top of the footer */
footer {
border-top: 2px solid lightGrey;
}

/* adds texture to main page area but not negative space */
@media screen and ( min-width: 1025px ) {

.masthead,
nav,
.main, .page__main,
.page__tray[data-position="T1"],
.page__tray[data-position="T2"],
.copyright {
background-image: url(/photos/bkgrd3.jpg);
}
}

nav ul,
nav li,
.page__tray ul.menu li {
background-color: transparent;
}

@media screen and ( min-width: 1025px ) {

.masthead,
nav,
.main, .page__main,
.page__tray[data-position="T1"],
.page__tray[data-position="T2"],
.copyright {
background-color: rgba( 255, 255, 255, 0 );
}
}

/*Slideshow styling ======================*/
#slideshow img {
border: 4px solid white;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);

}

.auto-resizable-iframe {
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}

.auto-resizable-iframe iframe{
position:absolute;

rod barbee · 2018-09-17 23:23:05

Ok, I get it now. I thought you were looking for the text align control.
I’d have to look at the page with the browser inspector to see what css might need to be used

Ken · 2018-09-17 23:29:27

Thanks for your help. When you get a chance to look at the page, I look forward to hearing what you discover. The CSS worked fine with BL1, so I am not sure why it is not working with BL2.

rod barbee · 2018-09-18 00:08:07

try this:

nav ul {
   padding-left: 70px;
}

adjust as needed.

rod barbee · 2018-09-18 00:11:39

I am not sure why it is not working with BL2.

not positive, but it's probably more a difference between the Okapi css and the Pangolin css. Chances are you'll find more discrepancies.

Matthew · 2018-09-18 06:11:09

Padding is a bad way to position your menu, as it may still apply when at smaller screen sizes, and there be entirely inappropriate. I advise using the built-in controls as much as possible.

If you want to customize the position of the menu using your own CSS, it's going to take A LOT MORE CSS than that single line to accommodate all situations.

rod barbee · 2018-09-18 07:04:08

yep, media queries for different sized browsers, etc.

Matt, I just tried that and it doesn't appear that the nav text-alignment is being honored. It only aligns right no matter the setting in Horizontal Navigation: Text Align
http://backlight-2-100.barbeephoto.com/masthead-body/

Matthew · 2018-09-18 07:14:19

I'm not seeing any issue with text-align for Navigation.

rod barbee · 2018-09-18 07:23:39

In the template, I've set the text-alignment to left. On this page, it's showing up aligned right
http://backlight-2-100.barbeephoto.com/masthead-body/

the inspector shows:

nav.nav_h > .content > ul {
    text-align: right;

This is a Pangolin based page though.

Matthew · 2018-09-18 07:28:53

Yeah, I just tried it and it works just fine for me. Make sure you're changing the correct alignment setting, maybe? This has always worked, and it hasn't changed; should still work now.

rod barbee · 2018-09-18 07:38:11

Ken, it looks like you have 94px of left/right padding on your Masthead. Why not try something like 24px.

rod barbee · 2018-09-18 07:48:03

Matthew wrote:

Yeah, I just tried it and it works just fine for me. Make sure you're changing the correct alignment setting, maybe? This has always worked, and it hasn't changed; should still work now.

Never mind. Found my problem. I don't want to tell you. It's embarrassing. Please don't ask.

I'm jet lagged and sleep deprived from shooting auroras last week. That's my excuse and I'm sticking with it!

Community @ The Turning Gate

#1 2018-09-17 19:59:37

How to change navigation layout?

#2 2018-09-17 21:41:00

Re: How to change navigation layout?

#3 2018-09-17 21:43:02

Re: How to change navigation layout?

#4 2018-09-17 21:47:02

Re: How to change navigation layout?

#5 2018-09-17 22:02:08

Re: How to change navigation layout?

#6 2018-09-17 22:56:43

Re: How to change navigation layout?

#7 2018-09-17 23:00:10

Re: How to change navigation layout?

#8 2018-09-17 23:00:22

Re: How to change navigation layout?

#9 2018-09-17 23:02:58

Re: How to change navigation layout?

#10 2018-09-17 23:03:15

Re: How to change navigation layout?

#11 2018-09-17 23:04:11

Re: How to change navigation layout?

#12 2018-09-17 23:09:37

Re: How to change navigation layout?

#13 2018-09-17 23:18:12

Re: How to change navigation layout?

#14 2018-09-17 23:23:05

Re: How to change navigation layout?

#15 2018-09-17 23:29:27

Re: How to change navigation layout?

#16 2018-09-18 00:08:07

Re: How to change navigation layout?

#17 2018-09-18 00:11:39

Re: How to change navigation layout?

#18 2018-09-18 06:11:09

Re: How to change navigation layout?

#19 2018-09-18 07:04:08

Re: How to change navigation layout?

#20 2018-09-18 07:14:19

Re: How to change navigation layout?

#21 2018-09-18 07:23:39

Re: How to change navigation layout?

#22 2018-09-18 07:28:53

Re: How to change navigation layout?

#23 2018-09-18 07:38:11

Re: How to change navigation layout?

#24 2018-09-18 07:48:03

Re: How to change navigation layout?

Board footer