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

Multi tool use
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>
html css
add a comment |
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>
html css
add a comment |
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>
html css
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
html css
edited Jan 3 at 9:13
mplungjan
89.7k22127184
89.7k22127184
asked Jan 3 at 9:11


Bill.GBill.G
3017
3017
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
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/
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
|
show 3 more comments
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">
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
add a comment |
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>
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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/
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
|
show 3 more comments
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/
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
|
show 3 more comments
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/
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>
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
|
show 3 more comments
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
|
show 3 more comments
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">
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
add a comment |
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">
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
add a comment |
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">
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">
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
add a comment |
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
add a comment |
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>
add a comment |
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>
add a comment |
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>
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>
edited Jan 3 at 9:56
answered Jan 3 at 9:49


Partho63Partho63
1,99011123
1,99011123
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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