Creating a responsive menu that integrates seamlessly with WordPress

Currently, I am in the process of redesigning a theme that is based on the Educampus theme: Educampus

I've encountered an issue where the responsive menu goes to two lines at a certain size:

col-lg or col-md:

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

col-sm

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

col-xs

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

Here is the code (generated by WordPress through wp_nav_menu):

https://jsfiddle.net/3Lfhs1jb/1/

HTML:

<div class="header_content">
   <div class="row">
      <div class="col-md-3 col-sm-3">
         <div class="row">
            <div class="logo">
               <a href="#"><img src="https://upload.wikimedia.org/wikipedia/en/b/bd/Random_App_Logo.png" alt=""></a>
               <div class="navbar-header rowl">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  </button>
               </div>
            </div>
         </div>
      </div>
      <div class="col-md-9 col-sm-9 nav_area">
         <nav class="main_menu navbar-collapse collapse">
            <ul id="menu-main-menu" class="nav navbar-nav navbar-right">
               <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-25 current_page_item menu-item-92 active"><a title="Welcome" href="http://imagerylab.pixiumdigital.com/">myLongerLongTitle</a></li>
               <li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-107 dropdown">
                  <a title="Researches" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">myLongTitle <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-menu">
                     <li id="menu-item-129" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-129"><a title="myTitle" href="#">myTitle</a></li>
                     <li id="menu-item-130" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-130"><a title="myTitle" href="#">myTitle</a></li>
                     <li id="menu-item-131" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-131"><a title="myTitle" href="#">myTitle</a></li>
                     <li id="menu-item-132" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-132"><a title="myTitle" href="#">myTitle</a></li>
                     <li id="menu-item-133" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-133"><a title="myTitle" href="#">myTitle</a></li>
                  </ul>
               </li>
               <li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-114 dropdown">
                  <a title="Publications" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">myLongerLongTitle <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-menu">
                     <li id="menu-item-187" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-187"><a title="myTitle" href="#">myTitle</a></li>
                     <li id="menu-item-188" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-188"><a title="myTitle" href="#">myTitle</a></li>
                     <li id="menu-item-189" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-189"><a title="myTitle" href="#">myTitle</a></li>
                  </ul>
               </li>
               <li id="menu-item-257" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-257"><a title="myTitle" href="#">myTitle</a></li>
               <li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106"><a title="myTitle" href="#">myTitle</a></li>
            </ul>
         </nav>
         <form action="#" class="header_search hidden-xs">
            <input placeholder="Search" value="" name="s" id="s" type="text">
            <input value="Search" type="submit">
         </form>
      </div>
   </div>
</div>

CSS:

.header_content {
    background: #fff;
    border-bottom: 3px solid #e4e4e4;
    font-family: 'Libre Baskerville', serif;
    position: relative;
    z-index: 9;
    margin-top: 5%;
}
.logo{
  padding-left: 30px;
}
.logo a img {
    min-width: 200px !important;
    padding: 0;
    max-width: 100%;
}
.nav_area {
    padding-right: 88px;
}
li{
  background-color:#c0c0c0;
  border: solid thin white;
}

I attempted another solution but it resulted in text being cut off:

https://i.sstatic.net/8zd4L.png

https://jsfiddle.net/f4bpyav4/

Modified CSS:

.header_content {
    background: #fff;
    border-bottom: 3px solid #e4e4e4;
    font-family: 'Libre Baskerville', serif;
    position: relative;
    z-index: 9;
    margin-top: 5%;
}
.logo{
  padding-left: 30px;
}
.logo a img {
    min-width: 200px !important;
    padding: 0;
    max-width: 100%;
}
.nav_area {
    padding-right: 88px;
}
li{
  background-color:#c0c0c0;
  border: solid thin white;
}
#menu-main-menu{
     list-style: none;
     width: 100%;
     margin: 0;
     padding: 0;
     white-space: nowrap;
     overflow: visible !important;
}
#menu-main-menu > li{
    display: inline-block;
     width: 17%;
     height: 100%;
     padding: 0;
}
#menu-main-menu > li > a{
    font-size: 100% !important;
}
htmlcsswordpress

Answer №1

It appears that the theme is built on the bootstrap css framework.

You have a few choices:

  • Adjust the mobile view breakpoint for the hamburger menu.
  • Tweak the margins and font sizes for smaller screens.
  • Hide certain menu items if necessary.

All of these adjustments can be made using css Media queries.
Refer to ZimSystems' answer for guidance on the first option.

The same principle applies when using media queries to adjust font sizes and margins:
(resize the browser after going fullscreen to trigger different css rule sets, 

@media only screen and (max-width: 600px) and (min-width: 420px)
) 
@media only screen and (max-width: 600px) and (min-width: 420px) {
  .navbar .navbar-nav li a {
    padding-left: 2px;
    padding-right: 2px;
    font-size: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .navbar .navbar-nav {
    margin-top: 0px; margin-bottom:0px;
  }
  .navbar .navbar-brand {
    height: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  div.navbar {
    min-height: 30px;
  }
}

@media only screen and (min-width: 420px) {
  .collapse {
    display: block;
  }
  .navbar-header {
    float: left;
  }
  .navbar-toggle {
    display: none;
  }
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav>li {
    float: left;
  }
  .navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

@media only screen and (max-width: 420px) {
  .collapse {
    display: none;
  }
  .navbar-header {
    display: block;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="navbar navbar-default navbar-fixed-top">
  <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a>
    <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </a>
  </div>
  <div class="navbar-collapse ">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">More</a></li>
      <li><a href="#">Options</a></li>
    </ul>
  </div>
</div>
If all else fails, consider hiding unnecessary menu items.
For example: 
.navbar .navbar-nav li:nth-child(2){display:none;}

There's a limit to how much content can fit within a given space. If you can't squeeze an elephant into a closet, either find a bigger closet or shrink the elephant.

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

The dropdown feature in Bootstrap 5 seems to be malfunctioning in Angular 12

I am facing issues while trying to implement the Bootstrap 5 dropdown in Angular 12. After installing all required packages and adding them to the angular.json file, I still cannot get it to work properly. Even after copying the example directly from the ...

javascripthtmlangularbootstrap-5angular12

How to Use jQuery Slice to Display the Top N Items from a Dropdown Menu

How can I display only the top 10 results from multiple UL lists in my navigation? The code snippet provided below currently works for the first list, but how can I extend this functionality to all of the lists? $(document).ready(function() { var elem ...

javascriptjqueryhtmltwitter-bootstrapslice

Scrollable Tailwind components

I am working on creating a page layout similar to this design: here is what I want to achieve The goal is to have a simple homepage with a navbar and split screen. The challenge is to prevent the entire page from scrolling normally and enable independent ...

htmlcsstailwind-css

Creating a carousel with a curved dial or wheel: A step-by-step guide

My goal is to create a carousel with curved container and downward movement for items not in focus. The description should change based on the focused item, and I prefer the carousel not to autoplay. via GIPHY I've been searching online for a soluti ...

jquerycsscarouselcurveowl-carousel-2

Javascript dynamically generates CSS animations

I need assistance creating a div with a CSS3 animated timer inside it when a button is clicked. Here is the code I have been working on: http://jsfiddle.net/arcco96/y5nov6rz/1/. Unfortunately, the div is not being created as expected. I believe the code sh ...

jqueryhtmlcssanimation

``In Internet Explorer, the function to swap the image source when hovering over the parent element

I'm trying to make it so that when I hover over the parent (Li) tag with my mouse, the src attribute of the child img tag changes. This code works correctly in Chrome but not in Firefox and Internet Explorer. <li class="player"> . . //some c ...

javascriptjqueryhtmlcss

Utilize Bootstrap in an Angular template to effortlessly expand one element while collapsing all others

I'm facing an issue with a table in my component. Each row has a button that, when clicked, should expand to show some calculated data specific to that row. However, the problem is that when one button is expanded, it keeps other buttons expanded as w ...

javascripthtmlcssangularangular-ui-bootstrap

Ensuring seamless functionality across all browsers for both hyperlinks and buttons

<input type="button" onclick="staff.updateDetail({$T.list.id},'staffno');" title="Change Details" value="{$T.list.staff_no}"> <a href="#" title="Change Details" style="color: #000" onclick="staff.updateDetail({$T.list.id},'staffno& ...

javascriptphpjqueryhtml

What is the best way to arrange the elements vertically within a flex container?

In my current code snippet, I have the following setup: <section class="body1"> <h1 class="text1">Tours around the world</h1> <h3 class="text1">Great experiences</h3> <form action="/respuestaUsuario/"> ...

htmlcssflexbox

Using Reactjs: How do you insert HTML code into the primaryText of a list item?

Is it possible to include a span element inside a ListItem like so: <ListItem primaryText={"<span class='inner'>Some important info</span>" + item.title} /> When I view the rendered content, the output is not an HTML span ...

htmlreactjsmaterial-uilistitem

How to effectively implement light and dark themes using SCSS colors?

Currently, I am utilizing Vue.js and SCSS along with PrimeVue and Element plus, where I am importing their variables. My objective is to dynamically change the theme color. In my dark-variables.scss file, I have defined various color variables for differe ...

cssvue.jssassthemeselement-plus

How can I change the cursor of a button to a pointer in Bootstrap 4 when the button is not disabled?

I'm working with a bootstrap button <button class="btn btn-primary">Login</button> My goal is to change the cursor to a pointer (hand) on this button when it's not disabled, instead of the default arrow. The disabled property of th ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to display an icon and text side by side in the header of a Phonegap app

____________________________________________________________ | logo_image page_Title | ------------------------------------------------------------ I am looking to create a header for my PhoneGap app similar to the one sh ...

htmlcsscordova

Showing and hiding div elements

I am looking to enhance this toggle function by making the div content retract and hide when the same link is clicked again. Additionally, I would like it to retract completely when a different link is clicked before the associated content slides down. Fu ...

javascriptjqueryhtmlcss

Using asp.net MVC along with jQuery and Razor to toggle checkbox selections within a group

I am attempting to toggle the checkboxes within a group. My goal is to click on the corresponding parent (id=50, id=51), and then have all its child checkboxes also be clicked. I have tried using the closest and find jQuery functions with some modification ...

jqueryhtmlasp.netasp.net-mvc

Stop the floating left div from wrapping onto a new line

My frustration is mounting as I have 4 divs set to float left, but the last one keeps wrapping onto a new line on smaller screens. I want them to scale with the screen size so they always stay on the same line, regardless of the screen size. I'm tryin ...

htmlcss

Picking and modifying a newly added HTML input element using Jquery

I am encountering a problem that I haven't been able to find a solution for through research or Google. I managed to successfully add multiple input boxes to my HTML/JQuery project, which are displaying correctly on the webpage. for (i = 0; i < ma ...

javascriptjqueryhtmljquery-selectorsappend

3 Methods for Implementing a Floating Header, Main Content, and Sidebar with Responsive Design

I am following a mobile-first approach with 3 containers that need to be displayed in 3 different layouts as shown in the image below: https://i.sstatic.net/UjKNH.png The closest CSS implementation I have achieved so far is this: HTML: <header>.. ...

javascripthtmlcsscss-float

What is the best way to trigger a download of an external image (AWS signed URL) when a button is clicked?

Currently, I am facing a challenge attempting to download an image from an s3 Presigned URL upon clicking a button in Nextjs (client-side). To provide some context: On the backend, I'm utilizing Golang and on the front end, it's the Nextjs Reac ...

htmlreactjsamazon-web-servicesgonext.js

"ReactPaginate's Dual Paginator feature for both Top and Bottom navigation

Dealing with Pagination: const CarsSection = () => { const itemsPerPage = 8; const [itemOffset, setItemOffset] = useState(0); const endOffset = itemOffset + itemsPerPage; const currentItems = carsData.slice(itemOffset, endOffset); const pageCo ...

javascripthtmlcssreactjsreact-paginate