Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Make navigation bar fit browser window

  1. lienamongtrees
    Member

    Hi all,

    I've done some internet searching and tried some proposed solutions, but I have yet to find the solution for the following problem (I'm a CSS noob, let that be clear):

    I'd like the navigation bar to resize itself according to the size of the browser window, rather than wrapping to a second line. I am assuming that I'll have to convert the font size of the menu items to em values rather than pixels, but I truly have quite a bit of trouble getting it all together.

    I'm using Pilcrow theme. Could anyone help me out here?

    Thanks in advance

    The blog I need help with is thresholdenvironmental.com.

  2. lienamongtrees
    Member

    Sorry, I thought the URL for the website would appear automatically:
    http://thresholdenvironmental.com/

    Thanks!

  3. timethief
    Member

    The responsive width themes we have are these ones > http://theme.wordpress.com/themes/features/responsive-width/

  4. lienamongtrees
    Member

    So it's simply not possible to do this using the Pilcrow theme?

  5. designsimply
    Staff

    You can make the navigation font size percentage or em based, but that would be in relation to the width of the navigation area itself, not the browser window. You could try converting the Pilcrow theme to have a responsive width, but it would take quite a bit of work and I'm not sure it's the result you want.

    I would recommend checking out the already-available options first. Do the responsive width themes that timethief linked look at all interesting to you? If so, try one out.

    Would it work to setup some of the menu items in a drop down? You could do that with a custom menu:
    http://en.support.wordpress.com/menus/

  6. lienamongtrees
    Member

    Hey, thanks for your help; I really appreciate it. I may eventually switch to a different theme and set it all up accordingly, but it took me quite a while to get it together as it is now, so I'm not really keen on starting over just yet! :)

    I have fixed the problem thus far by adding a minimum size of 990px (the theme width) to the container, thereby creating a scroll bar on the browser window, rather than having the navigation bar wrap to a second line.

    This works fine in Chrome and Firefox, but Internet Explorer keeps wrapping, even if the browser window is maximised. Any ideas why it does that, and how it can be fixed?

    Thanks a bunch

  7. designsimply
    Staff

    Maybe I'm not really understanding what you're trying to do. I checked http://thresholdenvironmental.com/ in various browsers, including Internet Explorer, and the navigation bar looked the same to me in all of them.

    Here is an example of how it looks to me in Firefox: http://cl.ly/FzSP/o

    Sorry I'm having trouble understanding. Is there any chance you can post a screenshot showing the problem so we can see what you're seeing?
    http://en.support.wordpress.com/make-a-screenshot/

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags