Public Forums 71,145 posts

[jasimo Friend jasimoJoin date: July 2015Posts: 21Downloads:3Uploads:8 Thanks: 8]

#1070034

Hi, I got a small issue regarding the navbar in purity III, maybe you could help me on this.
The navbar on my side works well on a standard desktop resolution (see attachment 1.jpg), but if i reduce the screensize it will come to status where it looks a little bit aweful because it doesn´t wrap (see attachment 2.jpg).
Is there a way that the navbar wrap like in attachment 3.jpg.

rgs
Jan

---

Attachments:

1. 
2. 
3. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1070120

Hi
When the screen size reduces the container width also reduced and all items do not fit in the less space this is why it comes down in the next row.

Regards

[jasimo Friend jasimoJoin date: July 2015Posts: 21Downloads:3Uploads:8 Thanks: 8]

#1070187

Hi, I think you get me wrong. My problem is that it doesn´t wrap.

1.jpg shows how it looks on a fullscreen desktop, fine from my point of view.
2.jpg is the reduced size, it doesn´t wrap.
3.jpg is the way I would like to have it, but it doesn´t look like this.

I want that the navbar wraps like in 3.jpg, actually it looks like in 2.jpg rgs Jan

• This reply was modified 6 years, 7 months ago by  jasimo. Reason: typo

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1070192

In NO.3 screenshot the menu items are in a 2nd row as per size.
Kindly share the URL of the page and illustrate the description in no.3 screenshot how u want to display the items and device name on which u took screenshot no3.

Regards

[jasimo Friend jasimoJoin date: July 2015Posts: 21Downloads:3Uploads:8 Thanks: 8]

#1070196

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1070202

Hi
Add more menu items so items will comes in the next row.
Or define a max width fo mainnav using below code in custom.css fille

.t3-mainnav .t3-navbar {

    max-width: 500px;
}

Regards

[jasimo Friend jasimoJoin date: July 2015Posts: 21Downloads:3Uploads:8 Thanks: 8]

#1070230

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1070260

Hi
I checked it in different devices and its working fine, kindly check site in real devices for the screen size.
Also your screenshot the site view are different in menu items.
Regarsd

[jasimo Friend jasimoJoin date: July 2015Posts: 21Downloads:3Uploads:8 Thanks: 8]

#1070284

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1070361

Hi
Add below code in custom.css file

.logo-image > a {
    max-width: 160px;
    max-height: 96px;
}

Regards

[jasimo Friend jasimoJoin date: July 2015Posts: 21Downloads:3Uploads:8 Thanks: 8]

#1070426

Thx, looks better, but this will influence the masthead when reducing the screen width.
I think the best way is to get rid of one menu point (submenu) to get the menu shorter.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1070432

Hi
the logo height, if you will use smaller height the header height will not increase.
You can use smaller size logo and set the height as per needs.

Regards

1 user says Thank You to Pankaj Sharma for this useful post

1. jasimo

[jasimo Friend jasimoJoin date: July 2015Posts: 21Downloads:3Uploads:8 Thanks: 8]

#1070434

Thanks for all the support on this topic. I think I will find a way around it.
Keep up the good work.

rgs Jan

• This reply was modified 6 years, 7 months ago by  jasimo.

[Author]

Posts