WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Menu wrapping adjustment (24 posts)

  1. Dibyendu
    Member
    Posted 6 months ago #

    I am not able to adjust this menu. Its coming on the second line. Even slider texts are looking HUGE. hoew to adjust both. currently the parameters are shown below

    /*Adjust menu items to not wrap as soon*/
    .navbar .nav > li > a {
        padding: 5px 8px 5px 8px;

    Link http://www.rhododendron.in

  2. Dibyendu
    Member
    Posted 6 months ago #

    Anyone any suggestion?

  3. rdellconsulting
    Member
    Posted 6 months ago #

    It wraps around 1080px width. You need to add some @media styling before it changes to the 3-bar menu.

  4. Dibyendu
    Member
    Posted 6 months ago #

    @rdellconsulting

    Do I have to delete the `/*Adjust menu items to not wrap as soon*/
    .navbar .nav > li > a {
    padding: 5px 8px 5px 8px;` from my child style.css? And put the Media Styling?

  5. Dibyendu
    Member
    Posted 6 months ago #

    @rdellconsulting

    Do I have to delete the

    /*Adjust menu items to not wrap as soon*/
    .navbar .nav > li > a {
    padding: 5px 8px 5px 8px;

    from my child style.css? And put the Media Styling?

  6. Dibyendu
    Member
    Posted 6 months ago #

    Anyone available. I terribly need this one to be fixed! Please help!

  7. ElectricFeet
    Member
    Posted 6 months ago #

    Not at my desk, so can't give you the CSS. Check the themesandco.com site.

    You have 3 approaches:
    - Reduce the padding size further, but it will probably begin to look cramped.
    - Reduce the font size of the menu items. You will need to reduce both the regular font size and the first-letter font size. They are different.
    - Further group the menus. Although this is the pragmatic and "easy way out", it is often the most visually pleasing too.

    You'll find details for the first two on the site. For the third, use Appearance > Menus.

  8. Dibyendu
    Member
    Posted 6 months ago #

    I have made all the paddings less. Still it is showing the same this.

    2nd point is not feasible for me. I got to keep all the pages in the menu.

    Will bootstrap coding mentioned above will help. But in that case as well I have put the code but it is not making any difference

    I am pastingmy Child CSS here. Please have a look and suggest accordingly

    /*
    Theme Name:     Customizr Child
    Theme URI:      http://themesandco.com/customizr
    Description:    A child theme for the Customizr WordPress theme. This child theme simply includes 2 files : style.css to add your custom css and functions.php where you can extend Customizr's core code. In order to keep your code as clean and flexible as possible, try to use Customizr's hooks API for your customizations. Do something awesome and have fun !
    Author:         Nicolas Guillaume (nikeo)
    Author URI:     http://themesandco.com
    Template:       customizr
    Version:        1.0.0
    */
    
    /* Your awesome customizations start right here !
    -------------------------------------------------------------- */
    /* ================================================ */
    /* Responsive - Media queries                       */
    /* Based on:                                        */
    /* http://lab.maltewassermann.com/viewport-resizer/ */
    /* ================================================ */
    
    /* ============================================== */
    /* HDTV                                           */
    /*                                      1920x1080 */
    /* ============================================== */
    @media all and (min-width: 1080px) and (max-width: 1920px) {
    /*  */
    
    }
    /* ============================================== */
    /* Widescreen                                     */
    /*                                       1280x800 */
    /* ============================================== */
    @media all and (min-width: 800px) and (max-width: 1280px) {
    /*  */
    
    }
    
    /* ============================================== */
    /* Twitter Bootstrap                              */
    /*                                                */
    /* ============================================== */
    @media all and (min-width: 980px) {
    /*  */
    
    }
    
    /* ============================================== */
    /* Twitter Bootstrap                              */
    /*                                                */
    /* ============================================== */
    @media all and (max-width: 979px) {
    /*  */
    
    }
    
    /* ============================================== */
    /* iPad Landscape and Narrow browser              */
    /*                                       1024x768 */
    /* ============================================== */
    @media all and (min-width: 768px) and (max-width: 1024px) {
    /*  */
    
    }
    
    /* ============================================== */
    /* iPad Portrait and Narrower browsers            */
    /*                                       768x1024 */
    /* ============================================== */
    @media all and (max-width: 768px) {
    /*  */
    
    }
    
    /* ============================================== */
    /* Small Tablet Landscape                         */
    /*                                        800x600 */
    /* ============================================== */
    @media all and (min-width: 600px) and (max-width:800px) {
    /*  */
    
    }
    
    /* ============================================== */
    /* Small Tablet Portrait                          */
    /*                                        600x800 */
    /* ============================================== */
    @media all and (max-width:600px) {
    /*  */
    
    }
    
    /* ============================================== */
    /* iPhone5/Android landscape (& narrow browser)   */
    /*                                        568x320 */
    /* ============================================== */
    @media all and (min-width: 320px) and (max-width:568px) {
    /*  */
    
    }
    
    /* ============================================== */
    /* iPhone4/Android landscape (& narrow browser)   */
    /*                                        480x320 */
    /* ============================================== */
    @media all and (min-width: 320px) and (max-width:480px) {
    /*  */
    
    }
    
    /* ============================================== */
    /* iPhone4/Android portrait               320x480 */
    /* iPhone5 portrait                       320x568 */
    /* ============================================== */
    @media all and (max-width:320px) {
    /*  */
    
    }
    
    /* ============================================== */
    /* Smaller devices                                */
    /* Android Landscape                      320x240 */
    /* ============================================== */
    @media all and (min-width:240px) and (max-width:320px) {
    /*  */
    
    }
    
    /* ============================================== */
    /* Smaller devices                                */
    /* Android Portrait                       240x320 */
    /* ============================================== */
    @media all and (max-width:240px) {
    /*  */
    
    }
    
    .navbar-inner {
        background: #F25C27;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }
    .tc-header.clearfix.row-fluid {
        background: #F25C27;
    }
    .tc-header .brand a {
      position:  relative;
      top: 10px;
      left: -1%;
    }
    .site-logo img {
        width: auto;
        height: auto;
    }
    .navbar .nav > li > a {
        color: #fff;
        text-shadow: none;
    }
    .navbar .nav > li > a:hover {
        color: #fff;
        background: #000;
    }
    .caret {
        border-top: 4px solid  #fff;
    }
    .navbar .nav li.dropdown .caret {
        border-top-color: #000;
        border-bottom-color: #000;
    }
    .navbar .nav li.dropdown > a:hover .caret {
        border-top-color: #fff;
        border-bottom-color: #fff;
    }
    .navbar-wrapper .navbar h2 {
        color: #fff;
        text-shadow: none;
    }
    .social-block a {
        color: #000;
        text-shadow: none;
    }
    /*Dropdown menu background and hover colors*/
    .dropdown-menu > li > a {
        color: #fff;
        background: #000;
    }
    .dropdown-menu > li > a:hover {
        color: #fff;
        background: #F25C27;
    }
    .dropdown-menu {
        background-color: #000;
        border-radius: 0;
    }
    /*Current page menu item*/
    .navbar .nav > li.current-menu-item > a{
        color: #fff;
        background: #000;
    }
    /*Content background*/
    .entry-content {
        background: #ccc;
        padding: 8px;
    }
    /*Font color and style*/
    body {
        color: #707070;
        font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    /*Sidebar widget icons orange*/
    .widget h3:before {
        color: #F25C27;
    }
    /*All links orange color*/
    a {
        color: #F25C27;
    }
    /*Body background black*/
    body {
        background: #000;
    }
    /*Removes text shadow for a cleaner text look*/
    * {
        text-shadow: none !important;
    }
    /*Circles around featured images*/
    .round-div {
        border: 104px solid #000;
    }
    /*Submenu & pages color and background*/
    .navbar .nav > li.current-menu-ancestor > a {
        color: #fff;
        background: #000;
    }
    .dropdown-menu > li.current-menu-item > a {
        color: #fff;
        background: #000;
    }
    /*Slider width Auto*/
    #customizr-slider {
            margin: 0 auto;
    }
    
    /*Adjust menu items to not wrap as soon*/
    .navbar .nav > li > a {
        padding: 3px 6px 3px 6px;
    }
    
    /* Remove the icon and category archives header*/
    header.archive-header {
    display: none;
    }
    
    /* Remove the icon before post titles */
    .format-icon:before {
    display: none;
    }
  9. rdellconsulting
    Member
    Posted 6 months ago #

    After a deeper look, the wrap breakpoint seems to be at 1215px.

    The CSS above will only kick in when width <= 240px (a small phone). What device are you trying to fix?

  10. Dibyendu
    Member
    Posted 6 months ago #

    the Menu is cluttered in my Laptop itself.

    I basically want to fix almost all the devices.

  11. rdellconsulting
    Member
    Posted 6 months ago #

    Well start by moving your code up higher in the list of possible media sizes. These work inline, so the current code will only kick in at 240px. If you put the same code up at say HDTV size, then it will work > 1080px.

    You tend to have to have multiple lines of css in each of the blocks and adjust for each device. Tedious but essential for the best user experience.

  12. Dibyendu
    Member
    Posted 6 months ago #

    I am repeating what I understood from your instruction. I got to put entire CSS code before this bootstrap code, right? and Bootstrap covers almost all the device visual properties, correct? Then why individual device resizing needed?Can you plz explain a little more. So that I can do necessary changes.

  13. rdellconsulting
    Member
    Posted 6 months ago #

    OK, I've moved your code up, and it will kick in when the viewport is > 980px (Bootstrap setting). See here

    Also noticed, your example above had the code at the bottom, for each block you have to make sure the code sits between the @media { and the }. So at the end of each block there will be a double }}.

    Now that code needs to be repeated and adjusted wherever you want it to different.

  14. Dibyendu
    Member
    Posted 6 months ago #

    Didnt improve the situation

    http://snag.gy/tmxo9.jpg

  15. rdellconsulting
    Member
    Posted 6 months ago #

    I'm viewing on a 1920 x 1080 display setting, I've realised you're looking at a lower resolution?

  16. Dibyendu
    Member
    Posted 6 months ago #

    But will the page look different in diff resolution? Then that is definitely a drawback right? The menu should be in one line in all the resolution! That should be the case. what else I need to do in order to achieve that?

  17. rdellconsulting
    Member
    Posted 6 months ago #

    I just adjusted my screen to 800 x 600 (those were the days) and I have the 3-bar menu. It's < 980px is the reason. So there'd need to be @media styling.

    And coincidentally, 800 x 600 is the dimension of a small tablet these days.

  18. Dibyendu
    Member
    Posted 6 months ago #

    To avoid all these mess shoudl I consider making the Menu wide and place it across the entire pagewidth and place the logo in the centre! But that will change the entire look of my website! that I am afraid of.

  19. rdellconsulting
    Member
    Posted 6 months ago #

    @EF made some suggestions above

  20. Dibyendu
    Member
    Posted 6 months ago #

    Okay, Let me get it cleared what I have understood.

    I need to put the custom codes all the @media styling {} which ever is mentioned for individual devices. right?

    I mean the same styling code in each @media?

  21. rdellconsulting
    Member
    Posted 6 months ago #

    Same styling code (selectors), but with adjusted values for each different block.

    Try using Resizer which helps test the different viewports.

  22. Dibyendu
    Member
    Posted 6 months ago #

    this link doesnt open

  23. rdellconsulting
    Member
    Posted 6 months ago #

  24. Dibyendu
    Member
    Posted 6 months ago #

    I think This is somewhat resolved now.

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.