CODEWITHSUNDEEP
javascriptjqueryhtmlcssflexbox
Paddy Hallihan
Paddy Hallihan

Reputation: 1686

CSS/JS/Jquery - Flex items for responsive screen sizes

I have a site with 3 items in my navigation which I want to remain on one line.

#nav{
  height:50px;
  width:100%;
  position:relative;
  display:flex; 
}
ul{
  display:inline-block;
  height:50px;
  line-height:50px;
  list-style:none;
}
li{
  display:inline-block;
}
#main_menu{
  flex:3;
  text-align:left;
}
#header_numbers{
  flex:4;
  text-align:center;
}
#auth_menu{
  flex:3;
  text-align:right;
}
<div id="nav">
<ul id="main_menu">
  <li>menu item 1</li>
  <li>menu item 2</li>
  <li>menu item 3</li>
</ul>
<ul id="header_numbers">
  <li>menu item 1</li>
  <li>menu item 2</li>
</ul>
<ul id="auth_menu">
  <li>menu item 1</li>
  <li>menu item 2</li>
  <li>menu item 3</li>
</ul>
</div>

If the screen gets too small the different menus will drop to another line but what I want to happen is hide the one in the center with the contact info and only have the two menus to the right and left so everything remains on one line.

I'm not sure if there is a way to achieve this with just CSS unless I do a query like @media only screen and (max-width: 500px) but I'd rather just keep these queries to a minimum for mobile/desktop rather than having additional queries at different sizes just for one specific element.

Upvotes: 0

Views: 86

Answers (4)

Mark Baijens
Mark Baijens

Reputation: 13222

If you don't want to use media query's you could use Javascript/jQuery but I think you are better off with media queries for this.

However this is a jQuery solution if you prefer that:

Put a event handler on the window load and resize events that check if the window with is equal or the same to 500. If that condition is true then hide the #header_numbers element, if it false show it.

$(window).on('load resize', function(){
  if($(window).width() <= 500) {
    $('#header_numbers').hide();
  }
  else {
    $('#header_numbers').show();
  }
  
  /* Alternative notation use what you prefer
  $(window).width() <= 500 ? $('#header_numbers').hide() : $('#header_numbers').show();
  */
});
#nav{
  height:50px;
  width:100%;
  position:relative;
  display:flex; 
}
ul{
  display:inline-block;
  height:50px;
  line-height:50px;
  list-style:none;
}
li{
  display:inline-block;
}
#main_menu{
  flex:3;
  text-align:left;
}
#header_numbers{
  flex:4;
  text-align:center;
}
#auth_menu{
  flex:3;
  text-align:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
<ul id="main_menu">
  <li>menu item 1</li>
  <li>menu item 2</li>
  <li>menu item 3</li>
</ul>
<ul id="header_numbers">
  <li>menu item 1</li>
  <li>menu item 2</li>
</ul>
<ul id="auth_menu">
  <li>menu item 1</li>
  <li>menu item 2</li>
  <li>menu item 3</li>
</ul>
</div>

Upvotes: 3

לבני מלכה
לבני מלכה

Reputation: 16251

As I know media-query is only way to apply style according screen size in css...

For Example #header_numbers will hide when the browser window is 600px wide or less:

@media only screen and (max-width: 600px) {
    #header_numbers{
        display: none;
    }
}

Upvotes: 1

Domenik Reitzner
Domenik Reitzner

Reputation: 1613

You are describing the functionality of CSS Media Queries, but say that you don't want to use them :)

You could always use JS, but it is less performat than Media queries

const maxWidth = 500;

document.addEventListener("DOMContentLoaded", () => {
    checkWidth();
});

window.addEventListener('resize', () => {
    checkWidth();
});

function checkWidth() {
    if(window.innerWidth < maxWidth) {
         // ...do somthing with the element
    }
}

Upvotes: 1

Yashwardhan Pauranik
Yashwardhan Pauranik

Reputation: 5556

You have to set the display property to none anyways, otherwise, it is not possible without media query to hide anything on different screen size (In your case to smaller screen size).

You can use : -

@media only screen and  (max-width: 540px) {
  #header_numbers{
    display: none;
  }
}

Upvotes: 1

Related Questions