merging sub-sites / navigation

pideja · 2019-09-12 00:47:20

In this site pideja.ca, I am trying to implement a vertical navigation scheme much like the one I did for lucnadeau.ca.
I imported the Luc Nadeau template and based my actual template on it.
For reasons not known by me, I have a hard time sizing the pallet 1 containing the navigation. I also have a logo in there. It should look something like this:
modele
For the moment, it evidently does not.
The pallet is now at 200px. and I can't find a way to make it leaner, say 100 pixels perhaps.
And I'd like it to extend to the bottom of the page.

Also,

rod barbee wrote:

go to your page template:
Navigation > Vertical Navigation.
Assign the Location to Pallet 1
the navigation will then be accessed by the mobile menu button in the upper right of the page for mobile devices.

But mine is on the left side!

Any hints?

Last edited by pideja (2019-09-12 00:59:46)

rod barbee · 2019-09-12 01:28:28

But mine is on the left side!
Any hints?

it all depends on the pallet position you've assigned in the Layout section of the page template. I don't know the reference of what you quoted but my guess is that it was for a layout with the pallet on the right.

rod barbee · 2019-09-12 01:32:31

I have a hard time sizing the pallet 1 containing the navigation.

Pallet width is also controlled in the Layout section of the page template. Minimum width you can set in the template is 200px.
Use custom css to make it narrower.

rod barbee · 2019-09-12 01:39:25

And I'd like it to extend to the bottom of the page.

your pallet is currently using a transparent background color. In the page template, go to Content Areas > Pallets > Background Color

pideja · 2019-09-12 03:50:06

Thanks, Rod,

I set the Content Areas > Pallets > Background Color to an appropriate colour (for now) and it works. But it doesn't go to the absolute bottom on my 1920x1080 screen.

As for the mobile menu (hamburger, it's on the left because I set the pallet location to the left because it's where I want it on the desktop. But on the mobile, it seems to me that it would look better on the right. At least on the phone.
Can I set this just for the phone? Another job for CSS?

rod barbee · 2019-09-12 04:05:11

pideja wrote:

As for the mobile menu (hamburger, it's on the left because I set the pallet location to the left because it's where I want it on the desktop. But on the mobile, it seems to me that it would look better on the right. At least on the phone.
Can I set this just for the phone? Another job for CSS?

There is no mobile setting for this in Backlight.

rod barbee · 2019-09-12 05:21:25

pideja wrote:

Thanks, Rod,
I set the Content Areas > Pallets > Background Color to an appropriate colour (for now) and it works. But it doesn't go to the absolute bottom on my 1920x1080 screen.

that's because it's running into the footer

pideja · 2019-09-12 06:01:23

Attempting to use CSS to control the menu on mobile. Found and adapted this:

/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #4CAF50;
  color: white;
}

The .topnav seems not recognized.

This doesn't work!

Last edited by pideja (2019-09-12 06:06:07)

rod barbee · 2019-09-12 06:33:13

.topnav is not a class in Backlight.
plus you'd need to use a media query to direct any css to mobile devices only.

Daniel Leu · 2019-09-12 08:40:43

pideja wrote:

Attempting to use CSS to control the menu on mobile. Found and adapted this:

/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #4CAF50;
  color: white;
}

The .topnav seems not recognized.

This doesn't work!

Pierre,

A better way would be to create a test page with a different template that has the look you are seeking for mobile. Then compare the two pages to create the necessary custom.css. I don't know if the different looks are only due to css changes or if there are html code differences as well!

Community @ The Turning Gate

#1 2019-09-12 00:47:20

merging sub-sites / navigation

#2 2019-09-12 01:28:28

Re: merging sub-sites / navigation

#3 2019-09-12 01:32:31

Re: merging sub-sites / navigation

#4 2019-09-12 01:39:25

Re: merging sub-sites / navigation

#5 2019-09-12 03:50:06

Re: merging sub-sites / navigation

#6 2019-09-12 04:05:11

Re: merging sub-sites / navigation

#7 2019-09-12 05:21:25

Re: merging sub-sites / navigation

#8 2019-09-12 06:01:23

Re: merging sub-sites / navigation

#9 2019-09-12 06:33:13

Re: merging sub-sites / navigation

#10 2019-09-12 08:40:43

Re: merging sub-sites / navigation

Board footer