1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Blogger messy navigation menu

Discussion in 'CSS' started by eepin88, Apr 18, 2016.

  1. #1
    Hi guys,

    I tried to create a sub-menu for the navigation menu in my blog powered by blogger but unfortunately all the menu became not in place. All tabs in the navigation menu used to be on the same straight line.
    SEMrush
    I tried to change the height for nav menu in CSS but to no avail. Please kindly advise on how to make the navigation tabs on a same straight line.
    upload_2016-4-19_3-10-37.png
     
    eepin88, Apr 18, 2016 IP
    SEMrush
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,484
    Likes Received:
    367
    Best Answers:
    28
    Trophy Points:
    335
    #2
    Where are the markup and css for this?

    g
     
    kk5st, Apr 18, 2016 IP
  3. eepin88

    eepin88 Greenhorn

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    CSS for the navigation menu as below, appreciate your help.


    /* ----- CSS Nav Menu Styling ----- */
    #cssnav {
    margin: 0px 0 0 -30px;
    padding: 0px 0px 0px 0px;
    width: 1050px; /* Set your width to fit your blog */
    font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
    color: $(tabs.text.color); /* Template Designer - Change Font Size */
    }

    #cssnav ul {
    background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
    _background-image: none; /* Template Designer - Change Menu Background */
    height: 20px; /* Change Height of Menu */
    list-style: none;
    margin: 0px;
    padding: 0px;
    }

    #cssnav li {
    float: left;
    padding: 0px;
    }

    #cssnav li a {
    background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
    _background-image: none; /* Template Designer - Change Menu Background */
    display: block;
    margin: 0px;
    font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
    text-decoration: none;
    }

    #cssnav > ul > li > a {
    color: $(tabs.text.color); /* Template Designer - Change Font Color */
    }

    #cssnav ul ul a {
    color: $(tabs.text.color); /* Template Designer - Change Color */
    }

    #cssnav li > a:hover, #cssnav ul li:hover {
    color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
    background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
    text-decoration: none;
    }

    #cssnav li ul {
    background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
    _background-image: none; /* Template Designer - Change Menu Background */
    display: none;
    height: auto;
    padding: 0px;
    margin: 0px;
    position: absolute;
    width: 200px; /* Change Width Of DropDown Menu */
    z-index:9999;
    }

    #cssnav li:hover ul {
    display: block;
    }

    #cssnav li li {
    background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
    _background-image: none; /* Template Designer - Change Background */
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
    width: 200px; /* Change Width Of DropDown Menu */
    }

    #cssnav li:hover li a {
    background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */
    }

    #cssnav li ul a {
    display: block;
    height: auto;
    margin: 0px;
    padding: 10px;
    text-align: left;
    }

    #cssnav li ul a:hover, #cssnav li ul li:hover > a {
    color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
    background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
    border: 0px;
    text-decoration: none;
    }]]>
     
    eepin88, Apr 19, 2016 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,131
    Likes Received:
    1,696
    Best Answers:
    239
    Trophy Points:
    515
    #4
    Is this problem specific to IE8? If so it's called the "staircase effect" -- a common problem when you float LI. The solution is to set the LI to display:inline and NOTHING else, then style the anchors instead. In this case, move the float from the LI to the anchor, set the LI to display:inline, apply ALL styling to the anchor not the LI.

    Though that CAN cause problems with dropdown menus since LI don't like to report their styling in legacy IE properly when set to inline... but a haslayout trigger usually fixes that.

    That said, it's blogger, do you even have the ability to fix this given how they don't let you do much of anything to the crap they vomit up and have the unmitigated gall to call markup? Much less you seem to have a number of pixel widths that makes it smell like you've got some rubbish fixed metric (and possibly fixed width) layout -- a giant middle finger to usability and accessibility that would make me suggest pitching the entire mess in the trash.

    Sadly that describes WAY to many of today's off the shelf solutions.
     
    deathshadow, Apr 22, 2016 IP