Blank space between menu Items & Overlap Easing slider lite?

  • Resolved sirilass

    (@sirilass)


    13 years, 1 month ago

    Hello,

    So i’ve been working on my menu, on my locally (for now) hosted wordpress site, I’d like it to look exactly like this ;

    http://i1337.photobucket.com/albums/o667/soulreaper1111/Untitled_zps4f4c7fd0.jpg

    So far I’ve got it down pretty good, I have the background image displaying, the text Is centered along that blue bar, Text color, size changed etc… I’m using Twentytwelve theme as a base.

    I’m running into one problem, I need to have a space in between ‘Research’ & ‘Coaching’

    I’ve tried to do this by adding a text-indent, and then using html widths to change the positioning. e.g.

    text-ident: 100px;

    then;

    ;#menu-item-34 a {
    ; width:***px;
    ;}

    etc

    But the actual links are getting messed up, whereas the link is no longer the text. And the big gap I create for Research turns the logo into a link for that page.
    This is not going to work when I added hovering/selected functions to each of the menu items and I’m wondering if I could get some help with it please.
    If I could just find a way to adjust each individual menu item’s position that would be great 🙂

    Here is my current child code;
    http://pastebin.com/raw.php?i=ybevvsTv

    I’d also like this menu to overlap Easing Slider Lite plugin, Could you please point me in the right direction there too..

    Happy Easter!

Viewing 11 replies - 1 through 11 (of 11 total)
  • WPyogi

    (@wpyogi)

    13 years, 1 month ago

    Hi there – it’s pretty hard to help with CSS without being able to see the site live, but I fooled around on a twentytwelve test site and it looks like this CSS will make a space between the menu items:

    @media screen and (min-width: 960px) {
.main-navigation li.page-item-25 {
   margin-right: 100px;
   }
}

    You’ll need to find the page-item-NUMBER of the page/menu item you want to put the margin on.

    Also, see that for twentytwelve you have to put it in media query in order for it to work on a regular screen.

    Are you using a browser tool such as Firebug? It’s immensely helpful for working with CSS.

    Thread Starter sirilass

    (@sirilass)

    13 years, 1 month ago

    Hi Thanks for the reply 🙂
    Sorry about being late getting back to you.

    Yes i’m using firebug, very handy.

    Cool thanks for that info i’ll try that, Any idea where to find page-item-#’s ?

    I’m sure i’ll find them, will let you know how i go. Thanks agian

    Thread Starter sirilass

    (@sirilass)

    13 years, 1 month ago

    Found em, Thanks 🙂

    Thread Starter sirilass

    (@sirilass)

    13 years, 1 month ago

    Works great thanks!!

    Run into a slight issue though. I have no CSS Class for ‘Home’ because of that, no page # to direct to. I cannot assign it within the CSS Menu CSS Classes option so i’m trying to write a bit of code to assign it a CSS Class, any help?

    Thx

    WPyogi

    (@wpyogi)

    13 years, 1 month ago

    What does the generated HTML code look like on your home page – a twentytwelve site should be something like:

    <body class="home blog custom-background custom-font-enabled single-author">

    So then you can use this in your CSS selectors:

    body.home other selectors here {
   styles here;
}

    If you don’t have something like that, something must have been majorly edited in your child theme…

    Thread Starter sirilass

    (@sirilass)

    13 years, 1 month ago

    Hi, It looks like this;

    <body class="blog logged-in admin-bar custom-font-enabled single-author customize-support">

    and my nav.menu generated looks like this ; 

    <div class="nav-menu">
<ul>
<li>
<li class="page_item page-item-5">
<li class="page_item page-item-7">
<li class="page_item page-item-9">
<li class="page_item page-item-6">
<li class="page_item page-item-8">

    <li> being the home with no class

    Thank you for the info, Sorry i’m a newb though i’m trying to learn as fast as I can, could you please give me an example of a completed; 

    body.home other selectors here {
   styles here;
}

    Something like..;

    body.home a.href="Home" {
Class: page-item-#
}

    ?

    Thank you ! 🙂

    Thread Starter sirilass

    (@sirilass)

    13 years, 1 month ago

    I’d just like to adjust the margin of the first ‘Home’ Menu item or alternatively shift the entire menu text along to the right a bit about 100px…

    I can’t seem to find a way to this without creating margins between each menu item… Still trying though. Sorry for double post.

    Thread Starter sirilass

    (@sirilass)

    13 years, 1 month ago

    I did it! woohoo.

    At first I was able to move the whole menu to the right a bit, using the left CSS command under .main.nav li.

    Then I played around with the menu a bit, assigned each Item CSS Classes, and for some reason it turned my ‘page-items’ into ‘menu-items’

    So currently my HTML reads;

    <nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle">Menu</h3>
<a class="assistive-text" href="#content" title="Skip to content">Skip to content</a>
<div class="menu-menu-container">
<ul id="menu-menu" class="nav-menu">
<li id="menu-item-16" class="HOME menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-16">
<li id="menu-item-14" class="ABOUT menu-item menu-item-type-post_type menu-item-object-page menu-item-14">
<li id="menu-item-13" class="RESEARCH menu-item menu-item-type-post_type menu-item-object-page menu-item-13">
<li id="menu-item-12" class="COACHING menu-item menu-item-type-post_type menu-item-object-page menu-item-12">
<li id="menu-item-11" class="RESOURCES menu-item menu-item-type-post_type menu-item-object-page menu-item-11">
<li id="menu-item-10" class="CONTACTUS menu-item menu-item-type-post_type menu-item-object-page menu-item-10">

    And my CSS to modify the placings; 

    @media screen and (min-width: 950px) {
.main-navigation li.menu-item-16 {
   margin-left: 110px;
   }
.main-navigation li.menu-item-14 {
   margin-left: 15px;
   }
.main-navigation li.menu-item-13 {
   margin-left: 11px;
   }
.main-navigation li.menu-item-12 {
   margin-left: 186px;
   }
.main-navigation li.menu-item-11 {
   margin-left: 0px;
   }
.main-navigation li.menu-item-10 {
   margin-left: 0px;
   }
}

    All displaying perfectly now

    Thank you very much for your help 🙂

    Thread Starter sirilass

    (@sirilass)

    13 years, 1 month ago

    Marked as resolved, Thanks

    GabrieleLou

    (@gabrielelou)

    12 years, 3 months ago

    Hello,

    I have a big issue with my second menu navigation displaying. My Menu items are packed without space between them !
    What can I do ? Where is my error ?
    This is my website : http://glanceblog.com/
    I’m stuck ! If someone can help me, i’ll be super grateful !!

    GabrieleLou

    (@gabrielelou)

    12 years, 3 months ago

    Hello,

    I have a big issue with my second menu navigation displaying. My Menu items are packed without space between them !
    What can I do ? Where is my error ?
    This is my website : http://glanceblog.com/
    I’m stuck ! If someone can help me, i’ll be super grateful !!

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Blank space between menu Items & Overlap Easing slider lite?’ is closed to new replies.