2

I have a WordPress site where the menu is floated to the right of a logo in a header. The logo takes up about 25% of the width and the remaining 75% holds 7 menu options. If an 8th menu option is added, it exceeds the available space and the whole menu basically shifts down underneath the logo. I'm sure many of you are familiar with this kind of menu response.

I'd like to be able to implement a certain set of new styles if the menu drops below the logo. So in other words, this isn't based on browser size but rather the number of menus a client may eventually add to a site. Does anyone know the proper syntax or method of implementing this?

Thanks in advance!

Improve this question
2
  • Just use smaller paddings of menu items, or change a smaller font size on actual media query viewport size. And dont use a floating li elements, better use display-inline css attribute. YOu can also use a JQ counter, and if elements is research 8 items, change a class to mobile menu or smaller menu. Commented Sep 30, 2014 at 20:24
  • Hi Foxsk8, thx for the info. I took your advice and reduced the padding on the menus which is a nice and simple solution. However, I don't mind that the menu falls beneath the logo. Other than Jquery, are there any other options you can recommend for applying different styles for when this happens? Thx! Commented Sep 30, 2014 at 22:46

3 Answers 3

Reset to default
1

Last year in April they released a newer updated version of the flex property, this works in most browsers, and down to IE10. It is like displaying things inline-block, but it interpolates widths, and allows a heightened flexibility to any responsive inline elements

here is a full description of its capabilities. http://css-tricks.com/snippets/css/a-guide-to-flexbox/

check out this fiddle

http://jsfiddle.net/yznby99f/3/

essentially you will put these display properties on the parent of whatever it is you want to see displayed inline.

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -ms-flexbox;/* TWEENER - IE 10 */
display: -webkit-flex;/* NEW - Chrome */
display: -moz-box; /* MOZILLA */
display: flex; /* standard syntax */
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for taking the time to put this together. I'm definitely going to play around with it. I perhaps should have been clearer in my original post. I don't mind that the menu falls beneath the logo. I'm basically just looking for a conditional statement of some kind for when the menu repositions itself under the logo. When it does this, I'd like to apply a different set of styles. Is there a way for the browser to determine when this happens?
0

I bet you have something like this

LOGOMenu

floated left

can you try 

#logo{
    width:40%;
    background:green;    
    height:20px;
    float:left;
}
#menu{
    min-width:60%;
    background:blue;    
    height:20px;
    display:inline-block;
}

See if results...

Improve this answer

2 Comments

Hi Jpganz18, thx for the response. I'm actually don't mind that the menu falls underneath the logo. I was wondering if there is conditional css code that can apply a different set of styles when the menu repositioning occurs.
you can use media queries
0

Using the previous fiddle example, I added a small snippet of code to solve your problem!

http://jsfiddle.net/yznby99f/4/

A huge key in responsive web design was available for use when CSS3 was released. that is what is called a media query.

@media all and (max-width: 699px){

    /*  Put any styles here   */

}

http://www.w3schools.com/css/css_mediatypes.asp

this means that when the screen size is below 699px it will execute any styles within their constraints.

It is important in responsive design to add a "viewport tag" to the of your document. this allows the browser to read and the device width of your user IE: tablet, and smartphone:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

You can also set when styles happen between a 2 pixel widths:

@media all and (max-width: 699px) and (min-width: 500px){

    /*  Put any styles here   */

}

To test the responsiveness in the fiddle drag the right hand side of you browser to the left to shrink the width

Improve this answer

2 Comments

Thx for the detailed message and feedback Justin. I'm familiar with the media queries but the issue I'm having isn't based in browser size. It's based on how many menu items a client adds regardless of the browser window size. When there are more than 7 menu items for example, the menu slides down to its own line which is fine. I just want to be able to style it when it does this.
Your best solution will be the flex property, your client can add a few additional menu items, but you should encourage your client to limit the amount of navigation elements that appear at the top level. An overloaded navigation can get confusing to the user.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.