Bootstrap nav design

up vote
-5
down vote

favorite

does anyone know how to achieve this in bootstrap for the nav? Logo on the left and nav on right.

My guess is you use col's with some css?

image here

asked Nov 8 at 9:50

Jenova1628

147

show your code and what you teried so far... And what version of bootstrap
– לבני מלכה
Nov 8 at 9:51

Coincidently, I was doing something very similar to this yesterday, but I can't see Bootstrap doing anything but get in the way.
– Quentin
Nov 8 at 9:53

@לבנימלכה I haven't tried it yet as I can't figure it out logic for it.
– Jenova1628
Nov 8 at 10:03

@Quentin i believe that you could use a row with a col-4 and a col-8 and change the background colours on each col maybe but its the slash in the middle i cant understand
– Jenova1628
Nov 8 at 10:04

@Jenova1628 — It's fairly trivial with clip path, but the Bootstrap conventions on how you do columns get in the way.
– Quentin
Nov 8 at 10:22

|
show 1 more comment

up vote
-5
down vote

favorite

does anyone know how to achieve this in bootstrap for the nav? Logo on the left and nav on right.

My guess is you use col's with some css?

image here

asked Nov 8 at 9:50

Jenova1628

147

show your code and what you teried so far... And what version of bootstrap
– לבני מלכה
Nov 8 at 9:51

Coincidently, I was doing something very similar to this yesterday, but I can't see Bootstrap doing anything but get in the way.
– Quentin
Nov 8 at 9:53

@לבנימלכה I haven't tried it yet as I can't figure it out logic for it.
– Jenova1628
Nov 8 at 10:03

@Quentin i believe that you could use a row with a col-4 and a col-8 and change the background colours on each col maybe but its the slash in the middle i cant understand
– Jenova1628
Nov 8 at 10:04

@Jenova1628 — It's fairly trivial with clip path, but the Bootstrap conventions on how you do columns get in the way.
– Quentin
Nov 8 at 10:22

|
show 1 more comment

up vote
-5
down vote

favorite

does anyone know how to achieve this in bootstrap for the nav? Logo on the left and nav on right.

My guess is you use col's with some css?

image here

asked Nov 8 at 9:50

Jenova1628

147

does anyone know how to achieve this in bootstrap for the nav? Logo on the left and nav on right.

My guess is you use col's with some css?

image here

html css twitter-bootstrap

asked Nov 8 at 9:50

Jenova1628

147

asked Nov 8 at 9:50

Jenova1628

147

asked Nov 8 at 9:50

Jenova1628

147

asked Nov 8 at 9:50

Jenova1628

147

asked Nov 8 at 9:50

Jenova1628

147

show your code and what you teried so far... And what version of bootstrap
– לבני מלכה
Nov 8 at 9:51

Coincidently, I was doing something very similar to this yesterday, but I can't see Bootstrap doing anything but get in the way.
– Quentin
Nov 8 at 9:53

@לבנימלכה I haven't tried it yet as I can't figure it out logic for it.
– Jenova1628
Nov 8 at 10:03

@Quentin i believe that you could use a row with a col-4 and a col-8 and change the background colours on each col maybe but its the slash in the middle i cant understand
– Jenova1628
Nov 8 at 10:04

@Jenova1628 — It's fairly trivial with clip path, but the Bootstrap conventions on how you do columns get in the way.
– Quentin
Nov 8 at 10:22

|
show 1 more comment

show your code and what you teried so far... And what version of bootstrap
– לבני מלכה
Nov 8 at 9:51

Coincidently, I was doing something very similar to this yesterday, but I can't see Bootstrap doing anything but get in the way.
– Quentin
Nov 8 at 9:53

@לבנימלכה I haven't tried it yet as I can't figure it out logic for it.
– Jenova1628
Nov 8 at 10:03

@Quentin i believe that you could use a row with a col-4 and a col-8 and change the background colours on each col maybe but its the slash in the middle i cant understand
– Jenova1628
Nov 8 at 10:04

@Jenova1628 — It's fairly trivial with clip path, but the Bootstrap conventions on how you do columns get in the way.
– Quentin
Nov 8 at 10:22

show your code and what you teried so far... And what version of bootstrap
– לבני מלכה
Nov 8 at 9:51

Coincidently, I was doing something very similar to this yesterday, but I can't see Bootstrap doing anything but get in the way.
– Quentin
Nov 8 at 9:53

@לבנימלכה I haven't tried it yet as I can't figure it out logic for it.
– Jenova1628
Nov 8 at 10:03

@Quentin i believe that you could use a row with a col-4 and a col-8 and change the background colours on each col maybe but its the slash in the middle i cant understand
– Jenova1628
Nov 8 at 10:04

@Jenova1628 — It's fairly trivial with clip path, but the Bootstrap conventions on how you do columns get in the way.
– Quentin
Nov 8 at 10:22

|
show 1 more comment

1 Answer
1

active

oldest

votes

up vote
0
down vote

I managed to create the section i wanted the code i am using is:

CSS:

.menu {

background-color: lightblue;

overflow: hidden;

background-color:white;

}



.menu:after {

content: "";

border-bottom: 850px solid transparent;

border-right: 400px solid #0055b7;

position: absolute;

left: 80%;

top: 0;

}



.nav-menu ul {

list-style: none;

display: inline-flex;

}



.nav-menu ul li {

padding: 40px;

}



.blue-bg {

background-color: #0055b7;

}

HTML:

 <div class="container-fluid">

                    <div class="row">

                      <div class="menu col-md-5">

                          <img class="paddingHeader" src="assets/images/headerlogo.png" /> 

                      </div>

                      <div class="content col-md-7 blue-bg">

                        <div class="nav-menu">

                              <ul>

                                <li><a class="text-white" href="">Home</a></li>

                                <li><a class="text-white" href="">About Us</a></li>

                                <li><a class="text-white" href="">Properties To Let</a></li>

                                <li><a class="text-white" href="">We Buy Houses</a></li>

                                <li><a class="text-white" href="">Contact Us</a></li>

                              </ul>

                        </div>

                      </div>

                    </div>

                  </div>

answered Nov 8 at 14:01

Jenova1628

147

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',
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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53205176%2fbootstrap-nav-design%23new-answer', 'question_page');
}
);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

I managed to create the section i wanted the code i am using is:

CSS:

.menu {

background-color: lightblue;

overflow: hidden;

background-color:white;

}



.menu:after {

content: "";

border-bottom: 850px solid transparent;

border-right: 400px solid #0055b7;

position: absolute;

left: 80%;

top: 0;

}



.nav-menu ul {

list-style: none;

display: inline-flex;

}



.nav-menu ul li {

padding: 40px;

}



.blue-bg {

background-color: #0055b7;

}

HTML:

 <div class="container-fluid">

                    <div class="row">

                      <div class="menu col-md-5">

                          <img class="paddingHeader" src="assets/images/headerlogo.png" /> 

                      </div>

                      <div class="content col-md-7 blue-bg">

                        <div class="nav-menu">

                              <ul>

                                <li><a class="text-white" href="">Home</a></li>

                                <li><a class="text-white" href="">About Us</a></li>

                                <li><a class="text-white" href="">Properties To Let</a></li>

                                <li><a class="text-white" href="">We Buy Houses</a></li>

                                <li><a class="text-white" href="">Contact Us</a></li>

                              </ul>

                        </div>

                      </div>

                    </div>

                  </div>

answered Nov 8 at 14:01

Jenova1628

147

add a comment |

up vote
0
down vote

I managed to create the section i wanted the code i am using is:

CSS:

.menu {

background-color: lightblue;

overflow: hidden;

background-color:white;

}



.menu:after {

content: "";

border-bottom: 850px solid transparent;

border-right: 400px solid #0055b7;

position: absolute;

left: 80%;

top: 0;

}



.nav-menu ul {

list-style: none;

display: inline-flex;

}



.nav-menu ul li {

padding: 40px;

}



.blue-bg {

background-color: #0055b7;

}

HTML:

 <div class="container-fluid">

                    <div class="row">

                      <div class="menu col-md-5">

                          <img class="paddingHeader" src="assets/images/headerlogo.png" /> 

                      </div>

                      <div class="content col-md-7 blue-bg">

                        <div class="nav-menu">

                              <ul>

                                <li><a class="text-white" href="">Home</a></li>

                                <li><a class="text-white" href="">About Us</a></li>

                                <li><a class="text-white" href="">Properties To Let</a></li>

                                <li><a class="text-white" href="">We Buy Houses</a></li>

                                <li><a class="text-white" href="">Contact Us</a></li>

                              </ul>

                        </div>

                      </div>

                    </div>

                  </div>

answered Nov 8 at 14:01

Jenova1628

147

add a comment |

up vote
0
down vote

I managed to create the section i wanted the code i am using is:

CSS:

.menu {

background-color: lightblue;

overflow: hidden;

background-color:white;

}



.menu:after {

content: "";

border-bottom: 850px solid transparent;

border-right: 400px solid #0055b7;

position: absolute;

left: 80%;

top: 0;

}



.nav-menu ul {

list-style: none;

display: inline-flex;

}



.nav-menu ul li {

padding: 40px;

}



.blue-bg {

background-color: #0055b7;

}

HTML:

 <div class="container-fluid">

                    <div class="row">

                      <div class="menu col-md-5">

                          <img class="paddingHeader" src="assets/images/headerlogo.png" /> 

                      </div>

                      <div class="content col-md-7 blue-bg">

                        <div class="nav-menu">

                              <ul>

                                <li><a class="text-white" href="">Home</a></li>

                                <li><a class="text-white" href="">About Us</a></li>

                                <li><a class="text-white" href="">Properties To Let</a></li>

                                <li><a class="text-white" href="">We Buy Houses</a></li>

                                <li><a class="text-white" href="">Contact Us</a></li>

                              </ul>

                        </div>

                      </div>

                    </div>

                  </div>

answered Nov 8 at 14:01

Jenova1628

147

I managed to create the section i wanted the code i am using is:

CSS:

.menu {

background-color: lightblue;

overflow: hidden;

background-color:white;

}



.menu:after {

content: "";

border-bottom: 850px solid transparent;

border-right: 400px solid #0055b7;

position: absolute;

left: 80%;

top: 0;

}



.nav-menu ul {

list-style: none;

display: inline-flex;

}



.nav-menu ul li {

padding: 40px;

}



.blue-bg {

background-color: #0055b7;

}

HTML:

 <div class="container-fluid">

                    <div class="row">

                      <div class="menu col-md-5">

                          <img class="paddingHeader" src="assets/images/headerlogo.png" /> 

                      </div>

                      <div class="content col-md-7 blue-bg">

                        <div class="nav-menu">

                              <ul>

                                <li><a class="text-white" href="">Home</a></li>

                                <li><a class="text-white" href="">About Us</a></li>

                                <li><a class="text-white" href="">Properties To Let</a></li>

                                <li><a class="text-white" href="">We Buy Houses</a></li>

                                <li><a class="text-white" href="">Contact Us</a></li>

                              </ul>

                        </div>

                      </div>

                    </div>

                  </div>

answered Nov 8 at 14:01

Jenova1628

147

answered Nov 8 at 14:01

Jenova1628

147

answered Nov 8 at 14:01

Jenova1628

147

answered Nov 8 at 14:01

Jenova1628

147

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Xtykutl