Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Navigation Bar List Formatting Issues

Featured Replies

I am trying to format a navigation bar similar to the attached image. I have used CSS to display this list horizontally with some rollover effects. I would like to place a line break within single list items but whatever I try the line break affects the whole row and not just an individual list item. I basically want the word "activities" to appear underneath "development", "services" underneath "additional" and "instructions" underneath "placement". Any suggestions would be greatly appreciated.

 

post-36521-0-54032100-1328618667_thumb.jpg

 

Kind Regards,

 

Phil

If it's coded as a single row of li tags without any dropdowns, you should be able to give a class with a larger height and less width to the li tags with two words so that only those have more height.

  • Author

If it's coded as a single row of li tags without any dropdowns, you should be able to give a class with a larger height and less width to the li tags with two words so that only those have more height.

 

 

Many thanks that's great advice and worked well. Seems so obvious now you've said it but I was tearing my hair out.

Much appreciated.

 

Phil

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.