here<\/a>).<\/p>\n
\nUpdate<\/h1>\n
After the question was updated with the custom style applied on the elements, a possible solution is to add next style to the badge<\/code>:<\/p>\n{line-height: 0; display: inline;}\n<\/code><\/pre>\nExample:<\/strong><\/p>\n<\/p>\n\n
\n
<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"><\/script>\n<link href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n<style type=\"text\/css\">\n\/* Move down content because we have a fixed navbar that is 50px tall *\/\n\n#vugraph-count {\n line-height: 0;\n display: inline;\n}\n\nbody {\n padding-top: 33px;\n padding-bottom: 20px;\n}\n\n.body {\n font-size: 16px;\n border-spacing: 2px;\n border-collapse: separate;\n text-align: center;\n}\n\n.body a {\n text-decoration: underline;\n}\n\n.navbar-fixed-top {\n background-color: #5b5b5b;\n min-height: 33px;\n border-style: none;\n}\n\n.navbar-toggle {\n margin-top: 2px;\n margin-bottom: 2px;\n padding-top: 7px;\n padding-bottom: 7px;\n}\n\n.navbar-nav>li>a {\n line-height: 3px;\n padding-top: 16px;\n padding-bottom: 14px;\n}\n\ndiv.navbar-header>img {\n height: 30px;\n margin-top: 2px;\n}\n\n.nav>li>a {\n font-size: medium;\n font-family: \"Helvetica Bold\", sans-serif;\n \/*font-weight: bold;*\/\n text-transform: uppercase;\n}\n\n.navbar-inverse .navbar-nav>li>a {\n color: #f0eed0;\n}\n\n.navbar-inverse .navbar-nav>li>a:hover {\n color: #f8dc54;\n}\n\n.nav li {\n display: inline;\n}\n\n#vugraph-menu.inprogress>a {\n color: black;\n background-color: #ecbe23;\n}\n\n#vugraph-menu.inprogress>a:hover,\n#vugraph-menu.inprogress.open>a:not(:hover) {\n color: white;\n}\n<\/style>\n\n<script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/3.3.6\/js\/bootstrap.min.js\"><\/script>\n<nav class=\"navbar navbar-inverse navbar-fixed-top\">\n <div class=\"container\">\n\n <div class=\"navbar-header\">\n <img src=\"http:\/\/www.bridgebase.com\/images\/bbo_red.png\">\n <button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#navbar\" aria-expanded=\"false\" aria-controls=\"navbar\">\n <span class=\"sr-only\">Toggle navigation<\/span>\n <span class=\"icon-bar\"><\/span>\n <span class=\"icon-bar\"><\/span>\n <span class=\"icon-bar\"><\/span>\n <\/button>\n <\/div>\n\n <div id=\"navbar\" class=\"nav navbar-collapse collapse\">\n <div class=\"container\">\n <ul class=\"nav navbar-nav\">\n <li id=\"vugraph-menu\" class=\"nav-item dropdown\" title=\"No tables in play\">\n <a id=\"navbar-vugraph-menu-link\" class=\"nav-link dropdown-toggle\" href=\"#\" role=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">Vugraph <span id=\"vugraph-count\" class=\"badge badge-notify\">1<\/span><\/a>\n <ul class=\"dropdown-menu\" aria-labelledby=\"navbar-vugraph-menu-link\">\n <li class=\"dropdown-item\"><a href=\"https:\/\/www.bridgebase.com\/v3\/?vugraph=y\" target=\"_blank\">Watch<\/a><\/li>\n <li class=\"dropdown-item\"><a href=\"https:\/\/www.bridgebase.com\/vugraph\/schedule.php\" target=\"_blank\">Schedule<\/a><\/li>\n <\/ul>\n <\/li>\n <li class=\"nav-item\"><a class=\"nav-link\" href=\"https:\/\/www.bridgebase.com\/myhands\/index.php\" target=\"_blank\">Hand Records<\/a><\/li>\n <li class=\"nav-item\"><a class=\"nav-link\" href=\"https:\/\/www.bridgebase.com\/points\/index.php\" target=\"_blank\">Masterpoints<\/a><\/li>\n <li class=\"nav-item\"><a class=\"nav-link\" href=\"https:\/\/www.bridgebase.com\/purchase\/pay.php\" target=\"_blank\">BB$<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n<\/nav><\/code><\/pre>\n<\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n
9<\/span> <\/p><\/div>\n<\/div>\n[ad_2]<\/p>\n
solved Badge increases navbar height <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] The badge is not causing the problem, you can check next example with two navbars (one with badge filled with a number, other without it) where both have similar height (like Chris Bar already noted). So: 1) It could be a problem with some of your custom CSS, in this case, I recommend to … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[3677,464,2398,532,1102],"class_list":["post-28808","post","type-post","status-publish","format-standard","hentry","category-solved","tag-badge","tag-css","tag-navbar","tag-twitter-bootstrap","tag-twitter-bootstrap-3"],"yoast_head":"\n[Solved] Badge increases navbar height - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-badge-increases-navbar-height\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Badge increases navbar height - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] The badge is not causing the problem, you can check next example with two navbars (one with badge filled with a number, other without it) where both have similar height (like Chris Bar already noted). So: 1) It could be a problem with some of your custom CSS, in this case, I recommend to ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-badge-increases-navbar-height\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-03T01:13:37+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-badge-increases-navbar-height\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-badge-increases-navbar-height\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Badge increases navbar height\",\"datePublished\":\"2023-01-03T01:13:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-badge-increases-navbar-height\/\"},\"wordCount\":155,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"badge\",\"css\",\"navbar\",\"twitter-bootstrap\",\"twitter-bootstrap-3\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-badge-increases-navbar-height\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-badge-increases-navbar-height\/\",\"name\":\"[Solved] Badge increases navbar height - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2023-01-03T01:13:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-badge-increases-navbar-height\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-badge-increases-navbar-height\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-badge-increases-navbar-height\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Badge increases navbar height\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Badge increases navbar height - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-badge-increases-navbar-height\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Badge increases navbar height - JassWeb","og_description":"[ad_1] The badge is not causing the problem, you can check next example with two navbars (one with badge filled with a number, other without it) where both have similar height (like Chris Bar already noted). So: 1) It could be a problem with some of your custom CSS, in this case, I recommend to ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-badge-increases-navbar-height\/","og_site_name":"JassWeb","article_published_time":"2023-01-03T01:13:37+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-badge-increases-navbar-height\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-badge-increases-navbar-height\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Badge increases navbar height","datePublished":"2023-01-03T01:13:37+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-badge-increases-navbar-height\/"},"wordCount":155,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["badge","css","navbar","twitter-bootstrap","twitter-bootstrap-3"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-badge-increases-navbar-height\/","url":"https:\/\/jassweb.com\/solved\/solved-badge-increases-navbar-height\/","name":"[Solved] Badge increases navbar height - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2023-01-03T01:13:37+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-badge-increases-navbar-height\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-badge-increases-navbar-height\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-badge-increases-navbar-height\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Badge increases navbar height"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/28808","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=28808"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/28808\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=28808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=28808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=28808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}