6 Replies - 1241 Views - Last Post: 04 October 2017 - 11:25 PM

#1 Killjoy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 31
  • Joined: 10-July 15

Need help making my menu mobile responsive

Posted 07 May 2017 - 12:42 AM

I have a website, and it's almost finished, I just want to make it mobile responsive. Here is the code for my menu:

<nav>
    <div id="menu">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="WebsiteNews.html">News</a></li>
        <li><a href="WebsiteCompetitions.html">Competitions</a></li>
        <li><a href="WebsiteOffers.html">Shop</a></li>
        <li><a href="WebsiteImages.html">Images</a></li>
        <li><a href="WebsiteVideos.html">Videos</a></li>
        <li><a href="WebsiteBuilds.html">Builds</a></li>
        <li><a href="/mybb">Forums</a></li>
        <li><a href="WebsiteComm.html">Fight Club</a></li>
        <li><a href="cooperators.html">Allies</a></li>
        <li><a href="WebsiteArticles.html">Articles</a></li>
        <li><a href="WebsiteMore.html">More</a></li>
    </ul>
    </div>
</nav>

<style>
ul {
    list-style-type: none; /* takes out bullet points from list */
    margin: 0; /* scaling */
    padding: 0; /* scaling */
    overflow: hidden;
    background-color: #0c1f2e; /* color */
}

li {
    float: left; /* moves elemt to the left */
}

li a {
    display: block; /*neatness */
    color: white; /* text color */
    text-align: center; /* aligned text */
    padding: 16px; /*easier to read */
    text-decoration: none; /* nothing fancy */
}

li a:hover {
    background-color: #639ddf; /* background color when hover over */
}
</style>


The menu works great on a computer, but I would like it to change to something more comfortable for mobile. So that when they look at my site through mobile, they don't have to zoom into the menu to click on it.

Thanks to all very much in advance.

Is This A Good Question/Topic? 0
  • +

Replies To: Need help making my menu mobile responsive

#2 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6380
  • View blog
  • Posts: 25,775
  • Joined: 12-December 12

Re: Need help making my menu mobile responsive

Posted 07 May 2017 - 12:52 AM

You could start with a search of "responsive web design". It is a large subject.

Responsive Web Design: What It Is And How To Use It
Was This Post Helpful? 0
  • +
  • -

#3 Martin smith  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 32
  • Joined: 27-October 16

Re: Need help making my menu mobile responsive

Posted 30 June 2017 - 03:59 AM

View Postandrewsw, on 07 May 2017 - 12:52 AM, said:

You could start with a search of "responsive web design". It is a large subject.

Responsive Web Design: What It Is And How To Use It

Thanks for sharing the link..its helpful..
Was This Post Helpful? 0
  • +
  • -

#4 Pogaca  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 98
  • Joined: 24-August 13

Re: Need help making my menu mobile responsive

Posted 30 June 2017 - 04:01 AM

Start using Bootstrap. Even Google use it.
Was This Post Helpful? 0
  • +
  • -

#5 SeekGuidance  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 17-June 17

Re: Need help making my menu mobile responsive

Posted 04 October 2017 - 02:02 PM

Make sure you use the mobile meta tag for each site so that it loads into mobile view if you are on mobile. Here you go:
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- viewport tag -->

Message me if you want help :)
Was This Post Helpful? 0
  • +
  • -

#6 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 13493
  • View blog
  • Posts: 53,899
  • Joined: 12-June 08

Re: Need help making my menu mobile responsive

Posted 04 October 2017 - 02:08 PM

View PostSeekGuidance, on 04 October 2017 - 04:02 PM, said:

[...]
Message me if you want help :)/>


Please keep the help on the forums for everyone to benefit.
Was This Post Helpful? 0
  • +
  • -

#7 SeekGuidance  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 17-June 17

Re: Need help making my menu mobile responsive

Posted 04 October 2017 - 11:25 PM

View Postmodi123_1, on 04 October 2017 - 02:08 PM, said:

View PostSeekGuidance, on 04 October 2017 - 04:02 PM, said:

[...]
Message me if you want help :)/>/>


Please keep the help on the forums for everyone to benefit.

Alright will keep that in mind, sry
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1