navbar

bootstrap navbar-static-top menu breaks on two lines

由 偶尔善良 提交于 2019-12-21 03:16:09
问题 I encountered a problem with the bootstrap navbar. I Made menu using the navbar-static-top - at first it was all good. When menu was expanded and few items added, and now with the width before to collapse, it is spreading into two lines that looks awful. In CSS bootstrap'a dig deeper, but without much success. Please help, how to be here? Currently it looks like shown here: Navbar code: <div class="navbar-wrapper"> <div class="container"> <div class="navbar navbar-inverse navbar-static-top"

Make logo image responsive using Bootstrap

由 荒凉一梦 提交于 2019-12-20 10:30:04
问题 I am using bootstrap for a site header. If I would like to make the website's logo responsive, Should I have two logo images (one for desktop and one for mobile) or should I resize my image logo? what is the best way to get it? Thanks. That's my code: <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"></div> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span

Bootstrap 3 Navbar won't collapse on mobile browsers but will in undersized desktop window

由 寵の児 提交于 2019-12-20 10:23:37
问题 My Rails 4 site with the latest version of bootstrap will not collapse in mobile however if I open the site on desktop and shrink the window, it will collapse. Here is the code for my navbar: <div class = "navbar navbar-inverse navbar-static-top"> <div class = "container"> <a href = "/" class = "navbar-brand" style="color: white;">Earn And Learn</a> <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse"> <span class = "icon-bar"></span> <span class = "icon

Bootstrap 4 fixed top nav and fixed sidebar

由 橙三吉。 提交于 2019-12-20 10:20:42
问题 This is a great example of how to create a navbar with a sidebar. Can anyone modify the code so that the top nav is top-fixed and the sidebar fixed/static with only the main page content scrolling? I can make the nav the nav top-fixed by assigning the class="fixed-top" to the nav , but I can't figure out how to make the sidebar fixed so that it remains in the same spot instead of scrolling up with the main page content. Applying class="sticky-top" to the sidebar doesn't seem to work. <nav

iOS 8 Swift Xcode 6 - Set top nav bar bg color and height

由 怎甘沉沦 提交于 2019-12-20 09:55:25
问题 I have looked everywhere and tested all the code snippets posted on Stack, but nothing works for me as I need it to work. I simply want to set: Nav bar height Nav bar bg color in RGB Nav bar centered logo I'm working with iOS8, Xcode 6 and Swift. Many thanks for a clear answer! This is my code in ViewController.swift // Set nav bar height navigationController?.navigationBar.frame.origin.y = -10 // Set nav bar bg color var navBarColor = UIColor(red: 4 / 255, green: 47 / 255, blue: 66 / 255,

Problems with the responsive navbar in Bootstrap 3

由 故事扮演 提交于 2019-12-20 09:47:37
问题 I had no problem with the responsive navbar in the last version of Bootstrap, but I cannot get version 3 to work. The toggle button appears properly and everything disappears but the brand, but the button does not respond to clicks. (http://getbootstrap.com/components/#navbar-responsive) Any help would be greatly appreciated! Here is the code so far: <!DOCTYPE html> <html> <html lang="en"> <head> <title>Hello World</title> <meta charset="utf-8"> <meta name="viewport" content="width=device

More than 5 items per line in jQuery Mobile navbar

由 倖福魔咒の 提交于 2019-12-20 09:35:08
问题 I have unsuccessfully looked for a variable to change the maximum number of items in a single line in a navbar. I am just starting with jQuery Mobile, trying to create a navbar with around 7 single-letter items. The navbar wraps automatically when more than 5 items are present, which is undesirable for my project. Can anyone point me to a piece in the code or css that regulates this behavior? 回答1: Using jQuery mobile 1.4.0, all I had to do is to create my own CSS class: .mytab { width: 12.5%

Bootstrap 4 navbar with two rows, bottom row collapsible

由 五迷三道 提交于 2019-12-20 05:46:12
问题 I would like the 2 navbars to appear in two separate rows, with all the links (collapsible items) in the bottom, and a header and toggle button in the top row. Like this: ------------------------------------------------------ ONE_________BIG_________TITLE [Toggle] ------------------------------------------------------ Nav items Icon Links Forms ... ------------------------------------------------------ Top row will be expanded in both mobile and desktop devices, but the toggle button should

Bootstrap navbar: nothing is displayed on smaller devices

由 二次信任 提交于 2019-12-20 04:49:55
问题 This nav bar with logo image in the middle works really well on larger screens but on smaller screens, everything disappears including logo image (and the hamburger fails to be displayed) Does anyone know a fix for this issue? Here's the link: http://codepen.io/davidcochran/pen/Fkwys #navbar-primary .navbar-nav { width: 100%; text-align: center; } #navbar-primary .navbar-nav > li { display: inline-block; float: none; } #navbar-primary .navbar-nav > li > a { padding-left: 30px; padding-right:

How to Make Navigation Buttons Mobile-Responsive and Collapse in Order?

由 我的梦境 提交于 2019-12-20 03:57:12
问题 I have been trying for hours with different methods to get my navigation buttons to be mobile-responsive and collapse in a specified vertical order . I want the nav buttons to collapse in a vertical column below the two logos , once the screen size is shrunken (to around 500px). How do I fix my code to achieve this? .container-fluid { border: 1px solid #000000; max-width: 1600px; overflow: hidden; } .wrap { /*background-color: yellow;*/ /*overflow: hidden;*/ } .Logos { width: 312px; display:
订阅 navbar