Icon in navigation dropping down and moving to next line

Trying to use Bootstrap 4 and dropdown-toggle:after to display siblings as a wordpress menu. The issue is that I can't seem to keep the carrot on the same line as the text on smaller screens.

https://i.sstatic.net/rJBM5.png

Check out the code snippet below:

<a class="dropdown-toggle article-toggle" data-toggle="dropdown" href="#">
  <?php the_title( '<h1 class="entry-title d-inline-block">', '</h1>' ); ?> 
</a>
<ul class="dropdown-menu dropdown-articles sibling-dropdown">
    <?php echo $children; ?>
</ul>

Answer №1

The solution that worked for me was including the following CSS rule in the dropdown-toggle class:

.dropdown-toggle {
   white-space: nowrap;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the content div is clicked within the overlay div, the popup will also close

I want to design a pop-up that features a container with a black background and some opacity, where the content of the popup is placed inside. Here's what I have in mind: <button (click)="showPopup = !showPopup">Open popup</button& ...

Adsense ad unit is not responsive and fails to display properly at dimensions of 320x50 px

I have a unique banner ad that I want to display as the footer on my responsive website. Using media queries recommended in the advertising documentation, I am adjusting the size based on different screen widths. Check out the CSS code below: <style&g ...

Repeated information displayed in modal pop-ups

HTML <a class="btn" data-popup-open="popup-1" href="#">More Details</a> <div class="popup" data-popup="popup-1"> <div class="popup-inner"> <h2>Unbelievable! Check this Out! (Popup #1)</h2> ...

Tips for organizing wells within bootstrap into separate columns

Looking for a way to organize my well list into two separate columns. I've included a link to my Plunker project here: https://plnkr.co/edit/35oC9Eochk6EPgKeI9he?p=preview. Below is the view section: <div class="well well-lg" ng-repeat="(key, d ...

Arranging the button next to the text input field in an Angular application

I added a button labeled "X" to a page, but it is currently positioned below a textfield. How can I use Bootstrap to align the button next to the textfield instead? https://i.sstatic.net/kbX5S.png <div class="form-group row"> <div class ...

What is the best way to utilize SCSS variables alongside data-attributes within Vue JS and Bootstrap Vue?

I'm currently working on implementing a Dark Theme button for my application that can change the entire theme with just one click. Although the functionality is already in place, I am exploring ways to make this process simpler and more efficient. So ...

What is the best way to show a label and select box side by side using Angular Material?

I have been trying to keep input and label in the same line using Angular Material, but I haven't found a solution yet. Most of the available solutions are in HTML and CSS, but I specifically need a way using Angular Material. The method I tried invo ...

Reducing the amount of nesting within selectors

Check out this code snippet: .signin-input{ input{ width: 100%; height: 2.5rem; color: black; :placeholder-shown{ opacity: 1; } } The CSS result looks like t ...

Steps to insert a logo into a Bootstrap navbar

Hey there, I'm having trouble fitting my logo into a Bootstrap navbar. The issue is that the logo appears larger than the navbar itself, and I've tried various solutions without success. Can someone please assist me with this problem? Below is th ...

What is the best way to enlarge a navbar from the top using Bootstrap 5?

I have a button labeled "MENU" at the top and a logo image below it. Currently, the menu expands from the bottom of the button. I would like it to expand from the top instead, and when the menu is expanded, the button should be under the navigation list, n ...

Angular's Motion Module

Incorporating Angular-5 into my project has introduced a plethora of animations on various pages. While the utilization of jQuery provides a straightforward approach for adding and removing classes to DOM elements, it is frequently advised against using jQ ...

Having trouble toggling the dropdown submenu feature in a Vuejs application?

.dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; } <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorial ...

Multi-line auto-suggest list with typeahead functionality

Currently, I am utilizing typeahead with Twitter Bootstrap and AngularJS. The autocomplete suggestions are displayed in a single line, as seen in the screenshot below. However, I would like to have the big cities' names displayed on separate lines. Fo ...

Tips for positioning an inner div within an outer div

Code Snippet: <div style="width: 300px; position: absolute; right: 25%; top: 5%; -webkit-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);"> <secti ...

I am experiencing a situation where my content is overflowing but the scroll feature is

After making my website dynamic, I encountered an issue where the content overflow on the home page prevented me from scrolling to the bottom of the page. Here is a link to my website for reference: ...

Animating an SVG in a circular motion starting from its central point with either CSS or XML

I've been grappling with the challenge of getting a part of my personal logo to rotate. My logo consists of "SB" and an asterisk, denoted as "st1," which is what I'm attempting to animate. Despite my attempts using XML and CSS, I've encounte ...

Expanding Images with JQuery Accordion

I'm facing a problem where I need to include accordions on my website with images, but whenever the accordion is opened, the image ends up stretched. Is there a solution to prevent this from happening? Below is the code snippet I am using: [Fiddle] ...

Changing color based on AngularJS condition using CSS

My HTML code looks like this: <div> <i class="glyphicon glyphicon-envelope" style="margin-top: -50px; cursor:pointer; color: #1F45FC" ng-click="createComment(set_id)"> </i> Route <center> ...

Click outside of this popup to dismiss it

I have been struggling to figure out how to make this popup close when clicking outside of it. Currently, it only closes when clicked directly on it. Your assistance in this matter is greatly appreciated. Here is the HTML code: <h2>Popup</h2> ...

What is the method to adjust the margin-left in an input checkbox?

Imagine you have: <div class="home"> <input type="checkbox"/>.... </div> I am trying to add margin-left:3px to the checkbox. This is my CSS code: .home+input[type=checkbox]{ margin-left:3px; } Can anyone assist me with this? ...