Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

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

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,029

merging sub-sites / navigation

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)

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,731
Website

Re: merging sub-sites / navigation

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 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,731
Website

Re: merging sub-sites / navigation

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 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,731
Website

Re: merging sub-sites / navigation

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


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

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

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,029

Re: merging sub-sites / navigation

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?

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,731
Website

Re: merging sub-sites / navigation

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 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,731
Website

Re: merging sub-sites / navigation

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


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

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

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,029

Re: merging sub-sites / navigation

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)

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,731
Website

Re: merging sub-sites / navigation

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


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

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

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,398
Website

Re: merging sub-sites / navigation

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!


Daniel Leu | Photography   
DanielLeu.com

Offline

Board footer

Powered by FluxBB