On resize the menu bar collapses, with half of the choices appearing in a line below the others

Multi tool use
Multi tool use












0















I am trying to create the main menu bar of my site. However while it works fine when the browser is in full size, when I resize the menu bar collapses, with half of the choices appearing in a line below the others while I want them to remain in line even if some of them will not be visible.



What can I do using HTML and CSS in order to make the choices of the menu bar to remain in a single line even when the line is not fully visible? I 've already tried every possible position in the main menu and the linking class, adding width with percentage and pixels and adding transition and fixed position combination. Nothing helped.






.main-menu {
background-color:grey;
font-weight:bold;
font-size:xx-large;
color: black;
}
.linking {
text-decoration: none;
color: white;
margin-right: 100px;
border:solid 2px;
border-color: red;
}

<p class="main-menu">
<a href="studenthome.html" class="linking">ΦΟΙΤΗΤΕΣ</a>
<a href="secrethome.html" class="linking">ΓΡΑΜΜΑΤΕΙΑ</a>
<a href="publisherhome.html" class="linking">ΕΚΔΟΤΗΣ</a>
<a href="sellerhome.html" class="linking">....</a>
</p>












share|improve this question





























    0















    I am trying to create the main menu bar of my site. However while it works fine when the browser is in full size, when I resize the menu bar collapses, with half of the choices appearing in a line below the others while I want them to remain in line even if some of them will not be visible.



    What can I do using HTML and CSS in order to make the choices of the menu bar to remain in a single line even when the line is not fully visible? I 've already tried every possible position in the main menu and the linking class, adding width with percentage and pixels and adding transition and fixed position combination. Nothing helped.






    .main-menu {
    background-color:grey;
    font-weight:bold;
    font-size:xx-large;
    color: black;
    }
    .linking {
    text-decoration: none;
    color: white;
    margin-right: 100px;
    border:solid 2px;
    border-color: red;
    }

    <p class="main-menu">
    <a href="studenthome.html" class="linking">ΦΟΙΤΗΤΕΣ</a>
    <a href="secrethome.html" class="linking">ΓΡΑΜΜΑΤΕΙΑ</a>
    <a href="publisherhome.html" class="linking">ΕΚΔΟΤΗΣ</a>
    <a href="sellerhome.html" class="linking">....</a>
    </p>












    share|improve this question



























      0












      0








      0








      I am trying to create the main menu bar of my site. However while it works fine when the browser is in full size, when I resize the menu bar collapses, with half of the choices appearing in a line below the others while I want them to remain in line even if some of them will not be visible.



      What can I do using HTML and CSS in order to make the choices of the menu bar to remain in a single line even when the line is not fully visible? I 've already tried every possible position in the main menu and the linking class, adding width with percentage and pixels and adding transition and fixed position combination. Nothing helped.






      .main-menu {
      background-color:grey;
      font-weight:bold;
      font-size:xx-large;
      color: black;
      }
      .linking {
      text-decoration: none;
      color: white;
      margin-right: 100px;
      border:solid 2px;
      border-color: red;
      }

      <p class="main-menu">
      <a href="studenthome.html" class="linking">ΦΟΙΤΗΤΕΣ</a>
      <a href="secrethome.html" class="linking">ΓΡΑΜΜΑΤΕΙΑ</a>
      <a href="publisherhome.html" class="linking">ΕΚΔΟΤΗΣ</a>
      <a href="sellerhome.html" class="linking">....</a>
      </p>












      share|improve this question
















      I am trying to create the main menu bar of my site. However while it works fine when the browser is in full size, when I resize the menu bar collapses, with half of the choices appearing in a line below the others while I want them to remain in line even if some of them will not be visible.



      What can I do using HTML and CSS in order to make the choices of the menu bar to remain in a single line even when the line is not fully visible? I 've already tried every possible position in the main menu and the linking class, adding width with percentage and pixels and adding transition and fixed position combination. Nothing helped.






      .main-menu {
      background-color:grey;
      font-weight:bold;
      font-size:xx-large;
      color: black;
      }
      .linking {
      text-decoration: none;
      color: white;
      margin-right: 100px;
      border:solid 2px;
      border-color: red;
      }

      <p class="main-menu">
      <a href="studenthome.html" class="linking">ΦΟΙΤΗΤΕΣ</a>
      <a href="secrethome.html" class="linking">ΓΡΑΜΜΑΤΕΙΑ</a>
      <a href="publisherhome.html" class="linking">ΕΚΔΟΤΗΣ</a>
      <a href="sellerhome.html" class="linking">....</a>
      </p>








      .main-menu {
      background-color:grey;
      font-weight:bold;
      font-size:xx-large;
      color: black;
      }
      .linking {
      text-decoration: none;
      color: white;
      margin-right: 100px;
      border:solid 2px;
      border-color: red;
      }

      <p class="main-menu">
      <a href="studenthome.html" class="linking">ΦΟΙΤΗΤΕΣ</a>
      <a href="secrethome.html" class="linking">ΓΡΑΜΜΑΤΕΙΑ</a>
      <a href="publisherhome.html" class="linking">ΕΚΔΟΤΗΣ</a>
      <a href="sellerhome.html" class="linking">....</a>
      </p>





      .main-menu {
      background-color:grey;
      font-weight:bold;
      font-size:xx-large;
      color: black;
      }
      .linking {
      text-decoration: none;
      color: white;
      margin-right: 100px;
      border:solid 2px;
      border-color: red;
      }

      <p class="main-menu">
      <a href="studenthome.html" class="linking">ΦΟΙΤΗΤΕΣ</a>
      <a href="secrethome.html" class="linking">ΓΡΑΜΜΑΤΕΙΑ</a>
      <a href="publisherhome.html" class="linking">ΕΚΔΟΤΗΣ</a>
      <a href="sellerhome.html" class="linking">....</a>
      </p>






      html css






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Jan 3 at 9:13









      mplungjan

      89.7k22127184




      89.7k22127184










      asked Jan 3 at 9:11









      Bill.GBill.G

      3017




      3017
























          3 Answers
          3






          active

          oldest

          votes


















          1














          May be this helps you. Have a look at the below code snippet.






          .main-menu {
          background:grey;
          font-weight:bold;
          font-size:xx-large;
          color: #000;
          overflow:hidden; /*to hide on collapse*/
          height:1em;
          }
          .linking {
          text-decoration: none;
          color: #FFF;
          margin: 0 100px 0 0;
          border:2px solid red;

          }

          <p class="main-menu">
          <a href="studenthome.html" class="linking">ΦΟΙΤΗΤΕΣ</a>
          <a href="secrethome.html" class="linking">ΓΡΑΜΜΑΤΕΙΑ</a>
          <a href="publisherhome.html" class="linking">ΕΚΔΟΤΗΣ</a>
          <a href="sellerhome.html" class="linking">....</a>
          </p>





          Preview at https://jsfiddle.net/itsselvam/8wvb4k9o/






          share|improve this answer


























          • That actually helped! However when it hide I cant reach it with scrolling right. Do you know how I could add that property too?

            – Bill.G
            Jan 3 at 9:36











          • Do you want to show the hidden links on mouse over, so you can click them ?

            – Selvam
            Jan 3 at 9:37











          • Yes, I want them to be hidden but still reachable

            – Bill.G
            Jan 3 at 9:39











          • Can you check the preview at jsfiddle.net/itsselvam/8wvb4k9o

            – Selvam
            Jan 3 at 9:42











          • Seems nice. However I would prefer to be reachable by scrolling so that a second line won't appear.

            – Bill.G
            Jan 3 at 9:44



















          0














          Please use below css property to do the same






              .main-menu
          {
          background-color:grey;
          font-weight:bold;
          font-size:xx-large;
          color: black;
          max-width: 100%;
          min-width: 1000px;
          }
          .linking
          {
          text-decoration: none;
          color: white;
          margin-right: 100px;
          border:solid 2px;
          border-color: red;
          }

          <p class="main-menu">
          <a href="studenthome.html" class="linking">
          ΦΟΙΤΗΤΕΣ
          </a>
          <a href="secrethome.html" class="linking">
          ΓΡΑΜΜΑΤΕΙΑ
          </a>
          <a href="publisherhome.html" class="linking">
          ΕΚΔΟΤΗΣ
          </a>
          <a href="sellerhome.html" class="linking">








          share|improve this answer
























          • I tried it and still when I resize the browser half of the menu appears in a second line

            – Bill.G
            Jan 3 at 9:21











          • can you try here by running code snippet ,it works fine for me

            – NPE
            Jan 3 at 9:28











          • why don't try to make it responsive by using @media screen

            – afikri
            Jan 3 at 9:32











          • It's because now it doesn't have enough choices in the menu bar and they can all remain in one line even when you resize. If you add one more it collapses when you resize.

            – Bill.G
            Jan 3 at 9:33



















          0














          Try This:






          .main-menu {
          background-color:grey;
          font-weight:bold;
          font-size:xx-large;
          color: black;
          }
          .main-menu .linking {
          background-color:grey;
          text-decoration: none;
          color: white;
          margin-right: 100px;
          border:solid 2px;
          border-color: red;
          /* added new css */
          width: 24%; /* give width of 24% as you have 4 a-links each having 1px border */
          position: fixed; /* set position fixed */
          }

          <p class="main-menu">
          <a href="#" class="linking" style="left: 0%;">ΦΟΙΤΗΤΕΣ</a> <!-- set left 0% as first child -->
          <a href="#" class="linking" style="left: 25%;">ΓΡΑΜΜΑΤΕΙΑ</a> <!-- set left 25% as second child -->
          <a href="#" class="linking" style="left: 50%;">ΕΚΔΟΤΗΣ</a> <!-- set left 50% as third child -->
          <a href="#" class="linking" style="left: 75%;">....</a> <!-- set left 75% as fourth child -->
          </p>








          share|improve this answer

























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54019211%2fon-resize-the-menu-bar-collapses-with-half-of-the-choices-appearing-in-a-line-b%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            3 Answers
            3






            active

            oldest

            votes








            3 Answers
            3






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            1














            May be this helps you. Have a look at the below code snippet.






            .main-menu {
            background:grey;
            font-weight:bold;
            font-size:xx-large;
            color: #000;
            overflow:hidden; /*to hide on collapse*/
            height:1em;
            }
            .linking {
            text-decoration: none;
            color: #FFF;
            margin: 0 100px 0 0;
            border:2px solid red;

            }

            <p class="main-menu">
            <a href="studenthome.html" class="linking">ΦΟΙΤΗΤΕΣ</a>
            <a href="secrethome.html" class="linking">ΓΡΑΜΜΑΤΕΙΑ</a>
            <a href="publisherhome.html" class="linking">ΕΚΔΟΤΗΣ</a>
            <a href="sellerhome.html" class="linking">....</a>
            </p>





            Preview at https://jsfiddle.net/itsselvam/8wvb4k9o/






            share|improve this answer


























            • That actually helped! However when it hide I cant reach it with scrolling right. Do you know how I could add that property too?

              – Bill.G
              Jan 3 at 9:36











            • Do you want to show the hidden links on mouse over, so you can click them ?

              – Selvam
              Jan 3 at 9:37











            • Yes, I want them to be hidden but still reachable

              – Bill.G
              Jan 3 at 9:39











            • Can you check the preview at jsfiddle.net/itsselvam/8wvb4k9o

              – Selvam
              Jan 3 at 9:42











            • Seems nice. However I would prefer to be reachable by scrolling so that a second line won't appear.

              – Bill.G
              Jan 3 at 9:44
















            1














            May be this helps you. Have a look at the below code snippet.






            .main-menu {
            background:grey;
            font-weight:bold;
            font-size:xx-large;
            color: #000;
            overflow:hidden; /*to hide on collapse*/
            height:1em;
            }
            .linking {
            text-decoration: none;
            color: #FFF;
            margin: 0 100px 0 0;
            border:2px solid red;

            }

            <p class="main-menu">
            <a href="studenthome.html" class="linking">ΦΟΙΤΗΤΕΣ</a>
            <a href="secrethome.html" class="linking">ΓΡΑΜΜΑΤΕΙΑ</a>
            <a href="publisherhome.html" class="linking">ΕΚΔΟΤΗΣ</a>
            <a href="sellerhome.html" class="linking">....</a>
            </p>





            Preview at https://jsfiddle.net/itsselvam/8wvb4k9o/






            share|improve this answer


























            • That actually helped! However when it hide I cant reach it with scrolling right. Do you know how I could add that property too?

              – Bill.G
              Jan 3 at 9:36











            • Do you want to show the hidden links on mouse over, so you can click them ?

              – Selvam
              Jan 3 at 9:37











            • Yes, I want them to be hidden but still reachable

              – Bill.G
              Jan 3 at 9:39











            • Can you check the preview at jsfiddle.net/itsselvam/8wvb4k9o

              – Selvam
              Jan 3 at 9:42











            • Seems nice. However I would prefer to be reachable by scrolling so that a second line won't appear.

              – Bill.G
              Jan 3 at 9:44














            1












            1








            1







            May be this helps you. Have a look at the below code snippet.






            .main-menu {
            background:grey;
            font-weight:bold;
            font-size:xx-large;
            color: #000;
            overflow:hidden; /*to hide on collapse*/
            height:1em;
            }
            .linking {
            text-decoration: none;
            color: #FFF;
            margin: 0 100px 0 0;
            border:2px solid red;

            }

            <p class="main-menu">
            <a href="studenthome.html" class="linking">ΦΟΙΤΗΤΕΣ</a>
            <a href="secrethome.html" class="linking">ΓΡΑΜΜΑΤΕΙΑ</a>
            <a href="publisherhome.html" class="linking">ΕΚΔΟΤΗΣ</a>
            <a href="sellerhome.html" class="linking">....</a>
            </p>





            Preview at https://jsfiddle.net/itsselvam/8wvb4k9o/






            share|improve this answer















            May be this helps you. Have a look at the below code snippet.






            .main-menu {
            background:grey;
            font-weight:bold;
            font-size:xx-large;
            color: #000;
            overflow:hidden; /*to hide on collapse*/
            height:1em;
            }
            .linking {
            text-decoration: none;
            color: #FFF;
            margin: 0 100px 0 0;
            border:2px solid red;

            }

            <p class="main-menu">
            <a href="studenthome.html" class="linking">ΦΟΙΤΗΤΕΣ</a>
            <a href="secrethome.html" class="linking">ΓΡΑΜΜΑΤΕΙΑ</a>
            <a href="publisherhome.html" class="linking">ΕΚΔΟΤΗΣ</a>
            <a href="sellerhome.html" class="linking">....</a>
            </p>





            Preview at https://jsfiddle.net/itsselvam/8wvb4k9o/






            .main-menu {
            background:grey;
            font-weight:bold;
            font-size:xx-large;
            color: #000;
            overflow:hidden; /*to hide on collapse*/
            height:1em;
            }
            .linking {
            text-decoration: none;
            color: #FFF;
            margin: 0 100px 0 0;
            border:2px solid red;

            }

            <p class="main-menu">
            <a href="studenthome.html" class="linking">ΦΟΙΤΗΤΕΣ</a>
            <a href="secrethome.html" class="linking">ΓΡΑΜΜΑΤΕΙΑ</a>
            <a href="publisherhome.html" class="linking">ΕΚΔΟΤΗΣ</a>
            <a href="sellerhome.html" class="linking">....</a>
            </p>





            .main-menu {
            background:grey;
            font-weight:bold;
            font-size:xx-large;
            color: #000;
            overflow:hidden; /*to hide on collapse*/
            height:1em;
            }
            .linking {
            text-decoration: none;
            color: #FFF;
            margin: 0 100px 0 0;
            border:2px solid red;

            }

            <p class="main-menu">
            <a href="studenthome.html" class="linking">ΦΟΙΤΗΤΕΣ</a>
            <a href="secrethome.html" class="linking">ΓΡΑΜΜΑΤΕΙΑ</a>
            <a href="publisherhome.html" class="linking">ΕΚΔΟΤΗΣ</a>
            <a href="sellerhome.html" class="linking">....</a>
            </p>






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Jan 3 at 9:35

























            answered Jan 3 at 9:29









            SelvamSelvam

            536516




            536516













            • That actually helped! However when it hide I cant reach it with scrolling right. Do you know how I could add that property too?

              – Bill.G
              Jan 3 at 9:36











            • Do you want to show the hidden links on mouse over, so you can click them ?

              – Selvam
              Jan 3 at 9:37











            • Yes, I want them to be hidden but still reachable

              – Bill.G
              Jan 3 at 9:39











            • Can you check the preview at jsfiddle.net/itsselvam/8wvb4k9o

              – Selvam
              Jan 3 at 9:42











            • Seems nice. However I would prefer to be reachable by scrolling so that a second line won't appear.

              – Bill.G
              Jan 3 at 9:44



















            • That actually helped! However when it hide I cant reach it with scrolling right. Do you know how I could add that property too?

              – Bill.G
              Jan 3 at 9:36











            • Do you want to show the hidden links on mouse over, so you can click them ?

              – Selvam
              Jan 3 at 9:37











            • Yes, I want them to be hidden but still reachable

              – Bill.G
              Jan 3 at 9:39











            • Can you check the preview at jsfiddle.net/itsselvam/8wvb4k9o

              – Selvam
              Jan 3 at 9:42











            • Seems nice. However I would prefer to be reachable by scrolling so that a second line won't appear.

              – Bill.G
              Jan 3 at 9:44

















            That actually helped! However when it hide I cant reach it with scrolling right. Do you know how I could add that property too?

            – Bill.G
            Jan 3 at 9:36





            That actually helped! However when it hide I cant reach it with scrolling right. Do you know how I could add that property too?

            – Bill.G
            Jan 3 at 9:36













            Do you want to show the hidden links on mouse over, so you can click them ?

            – Selvam
            Jan 3 at 9:37





            Do you want to show the hidden links on mouse over, so you can click them ?

            – Selvam
            Jan 3 at 9:37













            Yes, I want them to be hidden but still reachable

            – Bill.G
            Jan 3 at 9:39





            Yes, I want them to be hidden but still reachable

            – Bill.G
            Jan 3 at 9:39













            Can you check the preview at jsfiddle.net/itsselvam/8wvb4k9o

            – Selvam
            Jan 3 at 9:42





            Can you check the preview at jsfiddle.net/itsselvam/8wvb4k9o

            – Selvam
            Jan 3 at 9:42













            Seems nice. However I would prefer to be reachable by scrolling so that a second line won't appear.

            – Bill.G
            Jan 3 at 9:44





            Seems nice. However I would prefer to be reachable by scrolling so that a second line won't appear.

            – Bill.G
            Jan 3 at 9:44













            0














            Please use below css property to do the same






                .main-menu
            {
            background-color:grey;
            font-weight:bold;
            font-size:xx-large;
            color: black;
            max-width: 100%;
            min-width: 1000px;
            }
            .linking
            {
            text-decoration: none;
            color: white;
            margin-right: 100px;
            border:solid 2px;
            border-color: red;
            }

            <p class="main-menu">
            <a href="studenthome.html" class="linking">
            ΦΟΙΤΗΤΕΣ
            </a>
            <a href="secrethome.html" class="linking">
            ΓΡΑΜΜΑΤΕΙΑ
            </a>
            <a href="publisherhome.html" class="linking">
            ΕΚΔΟΤΗΣ
            </a>
            <a href="sellerhome.html" class="linking">








            share|improve this answer
























            • I tried it and still when I resize the browser half of the menu appears in a second line

              – Bill.G
              Jan 3 at 9:21











            • can you try here by running code snippet ,it works fine for me

              – NPE
              Jan 3 at 9:28











            • why don't try to make it responsive by using @media screen

              – afikri
              Jan 3 at 9:32











            • It's because now it doesn't have enough choices in the menu bar and they can all remain in one line even when you resize. If you add one more it collapses when you resize.

              – Bill.G
              Jan 3 at 9:33
















            0














            Please use below css property to do the same






                .main-menu
            {
            background-color:grey;
            font-weight:bold;
            font-size:xx-large;
            color: black;
            max-width: 100%;
            min-width: 1000px;
            }
            .linking
            {
            text-decoration: none;
            color: white;
            margin-right: 100px;
            border:solid 2px;
            border-color: red;
            }

            <p class="main-menu">
            <a href="studenthome.html" class="linking">
            ΦΟΙΤΗΤΕΣ
            </a>
            <a href="secrethome.html" class="linking">
            ΓΡΑΜΜΑΤΕΙΑ
            </a>
            <a href="publisherhome.html" class="linking">
            ΕΚΔΟΤΗΣ
            </a>
            <a href="sellerhome.html" class="linking">








            share|improve this answer
























            • I tried it and still when I resize the browser half of the menu appears in a second line

              – Bill.G
              Jan 3 at 9:21











            • can you try here by running code snippet ,it works fine for me

              – NPE
              Jan 3 at 9:28











            • why don't try to make it responsive by using @media screen

              – afikri
              Jan 3 at 9:32











            • It's because now it doesn't have enough choices in the menu bar and they can all remain in one line even when you resize. If you add one more it collapses when you resize.

              – Bill.G
              Jan 3 at 9:33














            0












            0








            0







            Please use below css property to do the same






                .main-menu
            {
            background-color:grey;
            font-weight:bold;
            font-size:xx-large;
            color: black;
            max-width: 100%;
            min-width: 1000px;
            }
            .linking
            {
            text-decoration: none;
            color: white;
            margin-right: 100px;
            border:solid 2px;
            border-color: red;
            }

            <p class="main-menu">
            <a href="studenthome.html" class="linking">
            ΦΟΙΤΗΤΕΣ
            </a>
            <a href="secrethome.html" class="linking">
            ΓΡΑΜΜΑΤΕΙΑ
            </a>
            <a href="publisherhome.html" class="linking">
            ΕΚΔΟΤΗΣ
            </a>
            <a href="sellerhome.html" class="linking">








            share|improve this answer













            Please use below css property to do the same






                .main-menu
            {
            background-color:grey;
            font-weight:bold;
            font-size:xx-large;
            color: black;
            max-width: 100%;
            min-width: 1000px;
            }
            .linking
            {
            text-decoration: none;
            color: white;
            margin-right: 100px;
            border:solid 2px;
            border-color: red;
            }

            <p class="main-menu">
            <a href="studenthome.html" class="linking">
            ΦΟΙΤΗΤΕΣ
            </a>
            <a href="secrethome.html" class="linking">
            ΓΡΑΜΜΑΤΕΙΑ
            </a>
            <a href="publisherhome.html" class="linking">
            ΕΚΔΟΤΗΣ
            </a>
            <a href="sellerhome.html" class="linking">








                .main-menu
            {
            background-color:grey;
            font-weight:bold;
            font-size:xx-large;
            color: black;
            max-width: 100%;
            min-width: 1000px;
            }
            .linking
            {
            text-decoration: none;
            color: white;
            margin-right: 100px;
            border:solid 2px;
            border-color: red;
            }

            <p class="main-menu">
            <a href="studenthome.html" class="linking">
            ΦΟΙΤΗΤΕΣ
            </a>
            <a href="secrethome.html" class="linking">
            ΓΡΑΜΜΑΤΕΙΑ
            </a>
            <a href="publisherhome.html" class="linking">
            ΕΚΔΟΤΗΣ
            </a>
            <a href="sellerhome.html" class="linking">





                .main-menu
            {
            background-color:grey;
            font-weight:bold;
            font-size:xx-large;
            color: black;
            max-width: 100%;
            min-width: 1000px;
            }
            .linking
            {
            text-decoration: none;
            color: white;
            margin-right: 100px;
            border:solid 2px;
            border-color: red;
            }

            <p class="main-menu">
            <a href="studenthome.html" class="linking">
            ΦΟΙΤΗΤΕΣ
            </a>
            <a href="secrethome.html" class="linking">
            ΓΡΑΜΜΑΤΕΙΑ
            </a>
            <a href="publisherhome.html" class="linking">
            ΕΚΔΟΤΗΣ
            </a>
            <a href="sellerhome.html" class="linking">






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Jan 3 at 9:16









            NPENPE

            237111




            237111













            • I tried it and still when I resize the browser half of the menu appears in a second line

              – Bill.G
              Jan 3 at 9:21











            • can you try here by running code snippet ,it works fine for me

              – NPE
              Jan 3 at 9:28











            • why don't try to make it responsive by using @media screen

              – afikri
              Jan 3 at 9:32











            • It's because now it doesn't have enough choices in the menu bar and they can all remain in one line even when you resize. If you add one more it collapses when you resize.

              – Bill.G
              Jan 3 at 9:33



















            • I tried it and still when I resize the browser half of the menu appears in a second line

              – Bill.G
              Jan 3 at 9:21











            • can you try here by running code snippet ,it works fine for me

              – NPE
              Jan 3 at 9:28











            • why don't try to make it responsive by using @media screen

              – afikri
              Jan 3 at 9:32











            • It's because now it doesn't have enough choices in the menu bar and they can all remain in one line even when you resize. If you add one more it collapses when you resize.

              – Bill.G
              Jan 3 at 9:33

















            I tried it and still when I resize the browser half of the menu appears in a second line

            – Bill.G
            Jan 3 at 9:21





            I tried it and still when I resize the browser half of the menu appears in a second line

            – Bill.G
            Jan 3 at 9:21













            can you try here by running code snippet ,it works fine for me

            – NPE
            Jan 3 at 9:28





            can you try here by running code snippet ,it works fine for me

            – NPE
            Jan 3 at 9:28













            why don't try to make it responsive by using @media screen

            – afikri
            Jan 3 at 9:32





            why don't try to make it responsive by using @media screen

            – afikri
            Jan 3 at 9:32













            It's because now it doesn't have enough choices in the menu bar and they can all remain in one line even when you resize. If you add one more it collapses when you resize.

            – Bill.G
            Jan 3 at 9:33





            It's because now it doesn't have enough choices in the menu bar and they can all remain in one line even when you resize. If you add one more it collapses when you resize.

            – Bill.G
            Jan 3 at 9:33











            0














            Try This:






            .main-menu {
            background-color:grey;
            font-weight:bold;
            font-size:xx-large;
            color: black;
            }
            .main-menu .linking {
            background-color:grey;
            text-decoration: none;
            color: white;
            margin-right: 100px;
            border:solid 2px;
            border-color: red;
            /* added new css */
            width: 24%; /* give width of 24% as you have 4 a-links each having 1px border */
            position: fixed; /* set position fixed */
            }

            <p class="main-menu">
            <a href="#" class="linking" style="left: 0%;">ΦΟΙΤΗΤΕΣ</a> <!-- set left 0% as first child -->
            <a href="#" class="linking" style="left: 25%;">ΓΡΑΜΜΑΤΕΙΑ</a> <!-- set left 25% as second child -->
            <a href="#" class="linking" style="left: 50%;">ΕΚΔΟΤΗΣ</a> <!-- set left 50% as third child -->
            <a href="#" class="linking" style="left: 75%;">....</a> <!-- set left 75% as fourth child -->
            </p>








            share|improve this answer






























              0














              Try This:






              .main-menu {
              background-color:grey;
              font-weight:bold;
              font-size:xx-large;
              color: black;
              }
              .main-menu .linking {
              background-color:grey;
              text-decoration: none;
              color: white;
              margin-right: 100px;
              border:solid 2px;
              border-color: red;
              /* added new css */
              width: 24%; /* give width of 24% as you have 4 a-links each having 1px border */
              position: fixed; /* set position fixed */
              }

              <p class="main-menu">
              <a href="#" class="linking" style="left: 0%;">ΦΟΙΤΗΤΕΣ</a> <!-- set left 0% as first child -->
              <a href="#" class="linking" style="left: 25%;">ΓΡΑΜΜΑΤΕΙΑ</a> <!-- set left 25% as second child -->
              <a href="#" class="linking" style="left: 50%;">ΕΚΔΟΤΗΣ</a> <!-- set left 50% as third child -->
              <a href="#" class="linking" style="left: 75%;">....</a> <!-- set left 75% as fourth child -->
              </p>








              share|improve this answer




























                0












                0








                0







                Try This:






                .main-menu {
                background-color:grey;
                font-weight:bold;
                font-size:xx-large;
                color: black;
                }
                .main-menu .linking {
                background-color:grey;
                text-decoration: none;
                color: white;
                margin-right: 100px;
                border:solid 2px;
                border-color: red;
                /* added new css */
                width: 24%; /* give width of 24% as you have 4 a-links each having 1px border */
                position: fixed; /* set position fixed */
                }

                <p class="main-menu">
                <a href="#" class="linking" style="left: 0%;">ΦΟΙΤΗΤΕΣ</a> <!-- set left 0% as first child -->
                <a href="#" class="linking" style="left: 25%;">ΓΡΑΜΜΑΤΕΙΑ</a> <!-- set left 25% as second child -->
                <a href="#" class="linking" style="left: 50%;">ΕΚΔΟΤΗΣ</a> <!-- set left 50% as third child -->
                <a href="#" class="linking" style="left: 75%;">....</a> <!-- set left 75% as fourth child -->
                </p>








                share|improve this answer















                Try This:






                .main-menu {
                background-color:grey;
                font-weight:bold;
                font-size:xx-large;
                color: black;
                }
                .main-menu .linking {
                background-color:grey;
                text-decoration: none;
                color: white;
                margin-right: 100px;
                border:solid 2px;
                border-color: red;
                /* added new css */
                width: 24%; /* give width of 24% as you have 4 a-links each having 1px border */
                position: fixed; /* set position fixed */
                }

                <p class="main-menu">
                <a href="#" class="linking" style="left: 0%;">ΦΟΙΤΗΤΕΣ</a> <!-- set left 0% as first child -->
                <a href="#" class="linking" style="left: 25%;">ΓΡΑΜΜΑΤΕΙΑ</a> <!-- set left 25% as second child -->
                <a href="#" class="linking" style="left: 50%;">ΕΚΔΟΤΗΣ</a> <!-- set left 50% as third child -->
                <a href="#" class="linking" style="left: 75%;">....</a> <!-- set left 75% as fourth child -->
                </p>








                .main-menu {
                background-color:grey;
                font-weight:bold;
                font-size:xx-large;
                color: black;
                }
                .main-menu .linking {
                background-color:grey;
                text-decoration: none;
                color: white;
                margin-right: 100px;
                border:solid 2px;
                border-color: red;
                /* added new css */
                width: 24%; /* give width of 24% as you have 4 a-links each having 1px border */
                position: fixed; /* set position fixed */
                }

                <p class="main-menu">
                <a href="#" class="linking" style="left: 0%;">ΦΟΙΤΗΤΕΣ</a> <!-- set left 0% as first child -->
                <a href="#" class="linking" style="left: 25%;">ΓΡΑΜΜΑΤΕΙΑ</a> <!-- set left 25% as second child -->
                <a href="#" class="linking" style="left: 50%;">ΕΚΔΟΤΗΣ</a> <!-- set left 50% as third child -->
                <a href="#" class="linking" style="left: 75%;">....</a> <!-- set left 75% as fourth child -->
                </p>





                .main-menu {
                background-color:grey;
                font-weight:bold;
                font-size:xx-large;
                color: black;
                }
                .main-menu .linking {
                background-color:grey;
                text-decoration: none;
                color: white;
                margin-right: 100px;
                border:solid 2px;
                border-color: red;
                /* added new css */
                width: 24%; /* give width of 24% as you have 4 a-links each having 1px border */
                position: fixed; /* set position fixed */
                }

                <p class="main-menu">
                <a href="#" class="linking" style="left: 0%;">ΦΟΙΤΗΤΕΣ</a> <!-- set left 0% as first child -->
                <a href="#" class="linking" style="left: 25%;">ΓΡΑΜΜΑΤΕΙΑ</a> <!-- set left 25% as second child -->
                <a href="#" class="linking" style="left: 50%;">ΕΚΔΟΤΗΣ</a> <!-- set left 50% as third child -->
                <a href="#" class="linking" style="left: 75%;">....</a> <!-- set left 75% as fourth child -->
                </p>






                share|improve this answer














                share|improve this answer



                share|improve this answer








                edited Jan 3 at 9:56

























                answered Jan 3 at 9:49









                Partho63Partho63

                1,99011123




                1,99011123






























                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54019211%2fon-resize-the-menu-bar-collapses-with-half-of-the-choices-appearing-in-a-line-b%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    91odUhh5N0WGFvt5HeI N283,LfBhtuoHx rW,CxEG1NUY8 PA,snzfU,wJSvgLXIJKrLo,v X7I 6IjOWBUwj6R02ZpY
                    o1 7Y2 Ru oRnIgw,heH

                    Popular posts from this blog

                    Monofisismo

                    Angular Downloading a file using contenturl with Basic Authentication

                    Olmecas