CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3angular-ui-bootstrap
user3362364
user3362364

Reputation: 477

Show navbar-nav horizontally in mobile screen

The code below shows horizontally in normal desktop view. However, on mobile screen, it shows vertically.

    <ul class="nav navbar-nav">
            <li>Link 1</li>
            <li>Link 2</li>
    </ul>

Web View: Link 1 Link 2

Mobile View:

Link 1

Link 2

I want to show the Mobile view horizontally. Trying to find the right css but couldn't find it after spending hours on it. Could someone point me to the right direction?

Upvotes: 4

Views: 9777

Answers (5)

zafer onay
zafer onay

Reputation: 1791

Bootstrap 4

Wrapping your code with nav and navbar-expand class makes the trick.

 <nav class="navbar navbar-expand navbar-light">
    <ul class="nav navbar-nav">
            <li class="nav-item pl-2">Link 1</li>
            <li class="nav-item pl-2">Link 2</li>
    </ul>
 </nav>

Upvotes: 5

sheshadri
sheshadri

Reputation: 1217

Add this CSS

.navbar-collapse.collapse {
display: block!important;
}

.navbar-nav>li, .navbar-nav {
float: left !important;
}

.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}

.navbar-right {
float: right!important;
}

Check This Demo

Upvotes: 2

Danish Khan
Danish Khan

Reputation: 143

Use This HTML

<div id="nav-btn">Button</div>
<ul class="sf-menu">
    <li><a href="#">Item 1</a>

        <div class="mobnav-subarrow"></div>
        <ul>
            <li><a href="#">Subitem 1.1</a>

            </li>
            <li><a href="#">Subitem 1.2</a>

            </li>
            <li><a href="#">Subitem 1.3</a>

            </li>
            <li><a href="#">Subitem 1.4</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Item 2</a>

        <div class="mobnav-subarrow"></div>
        <ul>
            <li><a href="#">Subitem 2.1</a>

            </li>
            <li><a href="#">Subitem 2.2</a>

            </li>
            <li><a href="#">Subitem 2.3</a>

            </li>
            <li><a href="#">Subitem 2.4</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Item 3</a>

        <div class="mobnav-subarrow"></div>
        <ul>
            <li><a href="#">Subitem 3.1</a>

            </li>
            <li><a href="#">Subitem 3.2</a>

            </li>
            <li><a href="#">Subitem 3.3</a>

            </li>
            <li><a href="#">Subitem 3.4</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Item 4</a>

        <div class="mobnav-subarrow"></div>
        <ul>
            <li><a href="#">Subitem 4.1</a>

            </li>
            <li><a href="#">Subitem 4.2</a>

            </li>
            <li><a href="#">Subitem 4.3</a>

            </li>
            <li><a href="#">Subitem 4.4</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Item 5</a>

        <div class="mobnav-subarrow"></div>
        <ul>
            <li><a href="#">Subitem 5.1</a>

            </li>
            <li><a href="#">Subitem 5.2</a>

            </li>
            <li><a href="#">Subitem 5.3</a>

            </li>
            <li><a href="#">Subitem 5.4</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Item 6</a>

        <div class="mobnav-subarrow"></div>
        <ul>
            <li><a href="#">Subitem 6.1</a>

            </li>
            <li><a href="#">Subitem 6.2</a>

            </li>
            <li><a href="#">Subitem 6.3</a>

            </li>
            <li><a href="#">Subitem 6.4</a>

            </li>
        </ul>
    </li>
</ul>

CSS

#nav-btn {
    display: none;
    font-size: 20px;
    font-weight: bold;
    background-color: blue;
    color: white;
    padding: 10px;
    cursor: pointer;
}
.nav-subarrow {
    display: none;
}
@media only screen and (max-width: 480px) {
    #nav-btn {
        display: block;
    }
    .nav-subarrow {
        display: block;
        background-color: #0f3975;
        opacity: .3;
        border-bottom: 1px solid white;
        border-top: 1px solid black;
        height: 20px;
        width: 30px;
        background-position: top left!important;
        position: absolute;
        top: 8px;
        right: 10px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        cursor: pointer;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        cursor: pointer;
        -webkit-transition: all .1s ease-in-out;
        -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
        -o-transition: all .1s ease-in-out;
        transition: all .1s ease-in-out;
    }
    .sf-menu {
        width: 100%!important;
        display: none;
    }
    .sf-menu.xactive {
        display: block!important;
    }
    .sf-menu li {
        float: none!important;
        display: block!important;
        width: 100%!important;
    }
    .sf-menu li a {
        float: none!important;
    }
    .sf-menu ul {
        position:static!important;
        display: none!important;
    }
    .xpopdrop ul {
        display: block!important;
    }
}

JS

$('#nav-btn').click(

function () {
    $('.sf-menu').toggleClass("xactive");
});



$('.nav-subarrow').click(

function () {
    $(this).parent().toggleClass("xpopdrop");
});

Upvotes: 0

MikeK
MikeK

Reputation: 383

It is likely that there just isn't space in mobile view to show the two links side by side. You could try some media queries to target specific resolutions for mobile (and other views - investigate something like Bootstrap3 to see common break points).

Try this, it will make each link half the screen width and so they should sit side by side, assuming the rest of your CSS is ensuring that there is no list style etc:

@media (max-width: 767px) {
    .navbar-nav li {
        padding: 0;
        margin: 0;
        width: 50%;
    }
}

You should probably post your CSS code for us to be able to help a little more too.

Upvotes: 1

George
George

Reputation: 6739

Navbar Fixed Top would be what you're looking for

http://getbootstrap.com/components/#navbar-fixed-top

Upvotes: 0

Related Questions