Navigation toggle improvement

Bootstrap Studio Help
1

Help related nav toggle menu arrangement

I want to set all social icons(txt format) in one single block rather than different blocks in my toggle menu. please help as soon as possible.

2

enter image description here

3

toggle menu help

I want to set all social icons(txt format) in one single block rather than different blocks in my toggle menu. please help as soon as possible.

4

toggle menu improvement

I want to set all social icons(txt format) in one single block rather than different blocks in my toggle menu. please help as soon as possible.

5

I'm not sure what you have for code there but you can set the CSS for those elements to display:inline-block for them to line up. Might have to use a media query to target that break point. If you provide some coding, we can look more closely at being able to help out.

Saj

6

This is the code for social list under bootstrap <navbar-default>

@charset "utf-8"; @media (min-width: 768px) { } .navbar-nas { margin: 7.5px -15px; } .navbar-nas > li > a { padding-top: 10px; padding-bottom: 10px; line-height: 20px; } @media (max-width: 768px) { .navbar-nas .open .dropdown-menu { position: static; float: none; width: auto; background-color: transparent;

} .navbar-nas .open .dropdown-menu > li > a, .navbar-nas .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px; } .navbar-nas .open .dropdown-menu > li > a { line-height: 20px; } .navbar-nas .open .dropdown-menu > li > a:hover, .navbar-nas .open .dropdown-menu > li > a:focus { background-image: none; } } @media (min-width: 768px) { .navbar-nas { float: left; margin: 0; } .navbar-nas > li { float: left; } .navbar-nas > ul> li > a { padding-top: 15px; padding-bottom: 15px; }/* CSS Document */ } .navbar-nas li a { height: 59px; line-height: 60px; padding:0 19px; padding-top:1px; color:#000; font-size:1.9em; margin-right:-15px; text-align:center; border:0px; }

7

Since I don't know the HTML of that section and I see you have some custom coding given the fact that the navbar uses .navbar-nas. The thing to try is the following CSS and add this class "social-icons" to each of the social media icon elements. I think that will get you what you want.

@media (max-width: 767px){
    .navbar-nas .social-icons {
        display: inline-block;
    }
}

Saj