Menu's all messed up on navigation bar

  • Author
    Posts
  • #1393230

    hobnobnoor
    Member

    hi!

    my menu bar is all over the navigation bar how can i get that fixed?

    Please help:(

    The blog I need help with is letstrycreating.com.

    #1393390

    mrdirby
    Member

    Did you get it figured out? The menu looks ok to me.

    If you need more help check out how to use custom menus here.
    http://en.support.wordpress.com/menus/

    #1393454

    hobnobnoor
    Member

    Hey mr.dirby,

    Thanks for your response I figured out my previous query however I am struggling to get rod of the navigation banner can I make it white so it becomes invisible ?

    and how can I add some kind of designs or brackets or dividers next or around the menu bars?

    #1393455

    Hi @hobnobnoor, I’ll give you two options to try out. The first takes away all the background, even for the submenus. This could make submenus somewhat hard to read if they drop down over images in posts or pages that are like in color or value.

    .navigation-main, .navigation-main ul ul, .menu-toggle, .main-small-navigation ul.nav-menu.toggled-on, .post-date, .sticky .entry-title:before, .site-footer, #social-networks a {
    background: none;
    border: none;
    }

    This second option takes away the color for the top menu, but makes the background color for the submenus white so that images in posts or pages won’t make them hard to read.

    .navigation-main {
        background: none;
        border: none;
    }
    
    .navigation-main ul ul {
        background: #FFFFFF;
    }
    #1393458

    hobnobnoor
    Member

    hey thesacredpath,

    Thank you for your response I chose the 2nd option look’s better now, however if I add more menu on the bar will they fall in the same row or fall below each other? as I wanted to add more menu’s on the menu bar like Recipe, Thoughts etc etc…
    and how can I expand the size of my website so that it looks not so shrunk

    #1393460

    Hey there,

    I chose the 2nd option look’s better now, if I add more menu on the bar will they fall in the same row or fall below each other?

    If your menu takes more space than the width of your site, your menu items will split into two rows. Check this screenshot.

    how can I expand the size of my website so that it looks not so shrunk

    You can use the following CSS code to increase the width of your site:

    .site {
        max-width: 1200px;
    }

    You can adjust the “1200px” value to your taste!

    #1393461

    hobnobnoor
    Member

    Thank you @ fabianapsimoes

    How can I get rid of the background which appears behind my website, I don’t want any background image or color :(

    and do I have to buy customized theme if I want to add brackets and backgrounds to my sidebar(so that it all looks more organized) in my existing website?

    #1393462

    hobnobnoor
    Member

    Background image sough-ted…awaiting the 2nd query reply :)

    #1393463

    Hi @hobnobnoor,

    Background image sough-ted…awaiting the 2nd query reply :)

    Awesome, nice job!

    do I have to buy customized theme if I want to add brackets and backgrounds to my sidebar(so that it all looks more organized) in my existing website?

    What do you mean by brackets?

    With the following CSS you can add a background and a border to your sidebar:

    #secondary {
        background: #eeeeee;
        border: #dddddd;
    }

    You can change “#eeeeee” and “#dddddd” for any color code you wish to use. There’s also a number of ways in which you can customize borders. Check this if you’re curious :)

    Another alternative is to add backgrounds to the different widgets in your sidebar, instead of to the sidebar as a whole. To do so, you just have to replace “#secondary” for “#secondary aside” in the CSS rule above.

    #1393465

    hobnobnoor
    Member

    Thank you Fabiana!

    But unfortunately the Sidebar doesn’t seem to look neat in spite of all my attempts with the given commands
    please can you help me :(

    1.how to reduce the spacing between each widget for example the space between widget 1 (social icons) and( you are following this blog )is too much same as other widgets below.

    2.how can I get the blog loving image in the center of the sidebar its sticking towards the left side of the sidebar now

    3. I want the sidebar background to be white or none, i don’t like the grey background but I am unable to change the background color to white or none…please help……..!

    #1393466

    justpi
    Member

    1. Add this and decrease the values:

    .widget {
        margin-bottom: 1.538em;
        padding-top: 1.538em;
    }

    2&3:

    #text-6 {
        text-align: center;
    }
    .site-main .widget-area {
        background-color: #FFFFFF;
    }

    #1393467

    hobnobnoor
    Member

    Thank you just pi!

    following your command above
    #text-6 {
    text-align: center;

    I tried using similar formula for my Community widget to align it as well with the help of inspecting element, but couldn’t find the right number for the widget
    :( what should be the right command?

    #1393468

    justpi
    Member

    The selector for your Community widget is:
    #jetpack_my_community-2

    But using the text-align command with this selector will have no effect, because the content of that widget is an unordered list inside its own div. You need this:

    .widgets-multi-column-grid ul {
        text-align: center;
    }
    .widgets-multi-column-grid ul li {
        display: inline;
        float: none;
    }

    #1393469

    hobnobnoor
    Member

    hmm..see I would have never been able to figure that out on my own………
    Thanks a ton you are a star justpi :)

    #1393470

    justpi
    Member

    You’re welcome!
    (Once you become more experienced with whatever developer extension you’re using, you’ll be able to figure these things out just like I can.)

    #1393471

    hobnobnoor
    Member

    hope so ;)

The topic ‘Menu's all messed up on navigation bar’ is closed to new replies.