How to: horizontal links on desktop, vertical on mobile?

Backlight Customization
#1

Hi all,

I’m using the following code on my website:

<h2 style="text-align: center;"><a href="/barcelona-photo-tours" title="Barcelona Photo Tours">Barcelona</a> &nbsp; <a href="/costa-brava-girona-photo-tours/" title="Costa Brava - Girona Photo Tour">Costa Brava - Girona</a> &nbsp; <a href="/tarragona-photo-tours" title="Tarragona Photo Tours">Tarragona</a> &nbsp; <a href="/valencia-photo-tours" title="Valencia Photo Tours">Valencia</a></h2>

on desktop it is horizontal as it should be.
How to make it centered vertical on a smartphone?

Best regards,
Oliver

#2

You can rewrite the menu html so that it’s an unordered list. give this list an ID or class.

<ul id="workshop-tour-menu" >
	<li>first item</li>
	<li>second item</li>
	<li>third item</li>
	<li>fourth item</li>
</ul>

In your custom css, create a media query that will affect widths above the size where you want the vertical menu to display.
Inside of the media query, style the list items to display as inline-block.

In larger displays you’d get the horizontal navigation. On mobile devices, the menu would revert to normal list behavior.

Then add some styling that affects both horizontal and vertical for font-size, centering, etc.

@media screen and (min-width:600px) { /*Adjust as needed*/

	ul#workshop-tour-menu li {
	display:inline-block;
	margin-right: 20px; /*adjusts space between items*/
		}
}	

ul#workshop-tour-menu li {
	list-style-type:none; /*removes list bullet*/
    font-size: 1.5em; /*adjust font size as needed*/
    padding: 5px 0; /*adds space above and below list items*/
}
ul#workshop-tour-menu {
	text-align:center;
    padding:0;
}

You may need to add more styling.

example page here: horizontal to vertical list - Rod's Outstanding BL5 test site
just change the width of the browser window until the horizontal list goes vertical.

#3

Did you change the code from yesterday to today? This is what I tried yesterday and it worked. Today, not so much anymore.

@media screen and (max-width:800px) { /*Adjust as needed*/
   .tournav a {
       display: block;
   }
}
#4

That’s much easier :blush:

never mind my idea. Though it was fun to put together!

#5

Hi Rod,

thank you very much for your help!
I followed your solution and it works perfect :slight_smile: :+1:

Best regards,
Oliver

#6

I saw that earlier! It looked great. But now it looks like you’ve change some of the css. I no longer see the horizontal list and it’s no longer centered.

#7

Hi Daniel,

I changed it last night but I’m very interested in your solution.
I lost the html from yesterday so now I’m working with Rod’s solution:

<h2>
<ul id="workshop-tour-menu" >
	<li><a href="/barcelona-photo-tours" title="Barcelona Photo Tours">Barcelona</a></li> &#183;
	<li><a href="/costa-brava-girona-photo-tours/" title="Costa Brava - Girona Photo Tour">Costa Brava / Girona</a></li> &#183;
	<li><a href="/tarragona-photo-tours" title="Tarragona Photo Tours">Tarragona</a></li> &#183;
	<li><a href="/valencia-photo-tours" title="Valencia Photo Tours">Valencia</a></li>
</ul>
</h2>

Best regards,
Oliver

#8

Sorry Rod, was trying Daniels solution (without access because of another html now)
But here we go again :wink:

#9

Well, Daniel’s solution has the dubious advantage of being simpler :wink:

#10

So how does that work?

#11

I’m just being snarky.

My solution was to make you rewrite the html and add more custom css. His solution simply added a bit of custom css. Less work. Same basic result.

I don’t know that one approach is semantically better than the other. One (his) was certainly easier.

#12

Rod, thanks for the clarification, maybe Daniel will tell us a bit more :slight_smile:

Best regards,
Oliver

#13

The reason his is simpler is that he used css to assign the anchor elements in your code to display:block;
This puts them on a line of their own rather than their default inline-block, which allows for them to be in a line along with other things like words and other anchor elements.

My way mimics the way the regular navigation is constructed: with list elements. But that makes it more complicated too. But it looks pretty in the code :slight_smile:

#14

It seems to be working, isn’t it?

#15

Hi Daniel,

yes, Rod’s solution is working perfect :partying_face:
But it would be great - probably for all readers - to see how you solved it in another way :point_up:
So we all will become a little bit better :hugs:

#16

Sorry apart of the css code I already shared, I can’t contribute more since you changed the html code on your page.

Edit: And I don’t remember how the code looked like.

#17

Daniel’s code makes it so that all anchor elements (<a href>) inside an element with the class “tournav” (.tournav a) are set to display:block;, which changes their layout behavior as explained above.
Further, it only does that when the media query conditions are met: at browser widths that are at or below 800px.

But it requires the original code you wrote with the string of anchor elements inside of the h2. You must have had it all inside an element with the class “tournav”. Maybe <h2 class="tournav"><a href...

2 Likes