Cannot create a focus background without moving menu text need help

  • Resolved sirilass

    (@sirilass)


    11 years ago

    Hi,

    I’m creating a website based on the twentytwelve theme. I have created my menu and am working on getting a static (does not move text) background once a menu item is selected..

    Am having problems with this, I can’t seem to add the image centered on the selected text without the padding/margins/size being applied to the entire menu item, and therefore shifting all the menu items positions..

    Here’s what I’d like it to look like (just a darker gradient behind the selected text);

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

    Here’s my current code that’s not working;

    .main-navigation .current-menu-item {
  background-image:url(http://localhost/bebawi/wp-content/themes/twentytwelve-child/images/menuselected.png);
  background-position:center;
  background-repeat:no-repeat;
  padding-left:30px;
  padding-right:30px;
  margin-top:1px
}

    While it does work, and the background is the right size etc, it shifts the entire text..

    Sorry the website is hosted locally so I cannot provide a link.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

    What’s the reason why you can’t link your site?

    Thread Starter sirilass

    (@sirilass)

    11 years ago

    It’s hosted locally on my computer, and not live… I can link any code from the site you require though.. if that helps. Thanks

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

    Can you recreate your webpage through CSSdesk and then share us that link?

    Thread Starter sirilass

    (@sirilass)

    11 years ago

    I’ve just tried now.. I can recreate the site, The links however are pointed to the local directory,.. as well as the images etc, And so If I were to share it with you. I think it would appear broken…

    Here’s the link anyway;

    http://cssdesk.com/8b4Cs

    Thanks 🙂

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

    You know we’re working blind if we can’t see the issue?

    Thread Starter sirilass

    (@sirilass)

    11 years ago

    Yes, However, I have no choice but to host it locally at the moment sorry, I’m just hoping someone can understand what i’m trying to do, and recognize what i’m doing wrong with the code and maybe give me some suggestions for me to try and fix it..

    My question is pretty general…

    I have a menu bar, With a main background image and menu items.

    I’d like to create a background image for each Menu item currently selected oversize from the container of just the text i.e. If I specify background-size: ##px ##px, It limits to the text container.

    I want to do this independently of the text, I.e. Without moving the margins of other menu items etc..

    However I think i’ve found a workaround for this, I just have to Adjust the container size of each individual menu item using the CSS Classes and padding, And then re-adjust the positioning. Then re-apply the background and it fits and doesn’t change relative menu items.

    Thanks for replying anyway 🙂 I Appreciate it

    Thread Starter sirilass

    (@sirilass)

    11 years ago

    All working now, Here is what I created to fix it in case anyone references this.. 

    .main-navigation .current-menu-item > a {
  background-image: url(http://localhost/bebawi/wp-content/themes/twentytwelve-child/images/menuselected.png);
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 1px
}

li#menu-item-16 a { padding-left: 30px; padding-right: 30px; }
li#menu-item-14 a { padding-left: 30px; padding-right: 30px; }
li#menu-item-13 a { padding-left: 30px; padding-right: 30px; }
li#menu-item-12 a { padding-left: 30px; padding-right: 30px; }
li#menu-item-11 a { padding-left: 30px; padding-right: 30px; }
li#menu-item-10 a { padding-left: 30px; padding-right: 30px; }

    Marked this as resolved 🙂

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Cannot create a focus background without moving menu text need help’ is closed to new replies.