Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #21914

    Hi there,

    I recently purchased the woo commerce theme ABUNDANCE. I am very pleased with the theme and it is working well, however I would like to know if it is possible to change 3 things:

    1. The height of the menu bar – I want to bring the text in my menu bar closer to my main page. Plus the grey hover over looks too chunky (in my opinion). Not only this but my home page link is constantly highlighted grey. How do I remove this so it only highlights on the rollover as the other links do?

    2. The height of the front page product slider – I tried a suggested widget called “simple image sizes” but could not get it to work on the slider, even when I resampled the images. I have taken a look at the CSS, but am new to it and couldn’t see anything that looked like the right thing to edit. Is it possible to also make the image slider sit the same width as the main page, and the top of it sit directly under the menu bar? I basically want to remove the white space around the slider if you get my drift.

    3. Lastly, I can’t seem to make the home link in the menu bar appear in capitals. Every other page link will appear in caps except the homepage link. ??

    Hope you can help me as I feel I have run out of ideas!

    You can reference my site at sesslebs.com.au

    Thanks,

    Seth.

    #113547

    Hi Seth,

    1) Can you explain a bit more what you mean by bring the text closer? Is this in the main menu that is part of the body content box or the sub menu under the search?

    The home page link is only set to highlight as the “current page”. If you don’t want the the highlight, you can change the background color to match that of the current menu. Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    #top .main_menu .avia_mega > .current-menu-item > a {
    background: #fff;
    }

    2) The whole slideshow container and html layout for the slideshow area (as well as the slideshow code itself) isn’t set up to expand full width like that. So any css fix/change would need to be cross browser tested and have would still be a bit forced/hacky.

    If its something you need to have, you will need to look into a freelance developer. It shouldn’t take too long but it just isn’t something we can customize for you via support.

    3) For the home link, it doesn’t look like the actual menu item is all capital letters but you can force all of your menu items to uppercase with:

    .main_menu .avia_mega > li > a {
    text-transform: uppercase;
    }

    Regards,

    Devin

    #113548

    Thanks Devin for the prompt support. I’ll give those things a try and let you know how I go. That’s a shame about the slider but I guess I’ll work around it. As far as the menu goes, I am referring to the main menu. I used CSS to remove any borders around the main menu but the container that the menu sits in is too large and prevents the text from sitting close enough to the main page. It’s a small thing, but if there’s a way you can help me to adjust it I would really appreciate it.

    Thanks again for your help.

    Seth.

    #113549

    So all those things worked, just need to get the main menu closer to the main page if possible!

    Cheers!

    #113550

    Hi Seth,

    I checked your site and it seems that the main menu is already close to the elements next to it. I’m not sure what you mean by making the main menu closer to the main page. Do you mean reducing the space inside the menu items?

    Regards,

    Ismael

    #113551

    Hi Ismael,

    What I am referring to is the main menu. I want the main menu to sit closer to the division line between the header and main page. The menu is floating to far away from that line and I would like to have it sitting a bit closer as I think this would look better aesthetically. Is that clear, sorry about that.

    Seth

    #113552

    So yeah, I guess it is the space around the menu that is stopping it from sitting closer to that line.

    Hope I’m being clear.

    #113553

    Hi Seth,

    As kindly add this code in your Quick CSS (located in Abundance > Theme Options > Styling):

    .container.slideshow_big {
    padding: 5px 0; /*adjust 5px to adjust top and bottom padding*/
    }

    .boxed #wrap_all {
    margin-top: -64px;/*adjust the top margin, default value: -47px*/
    }

    Just adjust the values above. Hope this helps.

    Regards,

    Ismael

    #113554

    Okay so I tried this but it didn’t do what I was hoping it would. Instead it moved the image slider above the main page. I simply want the text in the main menu to drop down a couple of pixels.. Currently there is a gap of about 5 pixels between the menu text and the line beneath it, but I want to reduce that gap to about 2 or 3px. Just a minor adjustment.

    Hope this is clearer.

    Cheers.

    #113555

    Maybe the way to do is to reduce the height of the main menu container. Just a thought.

    #113556

    Can you take a screenshot and annotate it with what you are looking for? Its a bit hard to guess on the specific element you want adjusted and exactly how :)

    Regards,

    Devin

    #113557

    Okay so I couldn’t attach a screen grab to this post so what ive done is placed one on my website. If you go to the “SHOP” link in the menu I have placed an annotated screen grab in the main content of that page. The problem with the css instructions you gave me before was that the slider was moving up outside of the main page content and into the header. I simply want the text to move down a fraction towards the main page. Hopefully you’ll get what i mean when you see the screen grab.

    Cheers.

    #113558

    Hey!

    Insert following code into the quick css field.

    .main_menu .avia_mega a {
    margin: 21px 0 0 !important;
    }

    You can increase/decrease the 21px value to shift the text down (or up).

    Best regards,

    Peter

    #113559

    Thanks again but unfortunately this hasn’t worked either. It moved the menu down but stuffed it up too. I’m using the boxed theme but have removed the detail around the menu using css. maybe this has something to do with it? I didn’t want the menu to appear to be overlapping the header so i removed the lines and colour using css. Just a thought, could it work if you gave me some css code that overrides the size of the main menu container???

    If not, I may just have to leave things the way they are.

    Cheers for your time!

    #113560

    This is the other css that i have in my quick css field:

    .main_menu {

    font-family: futura, helvetica, arial, sans-serif

    }

    .sub_menu {

    font-family: futura, helvetica, arial, sans-serif

    }

    #top .logo{

    top:9px;

    }

    #top .logo, .logo a{

    display:block;

    position:relative;

    border: none;

    padding: 0;

    margin:0;

    }

    #wrap_all {

    box-shadow: none;

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    }

    .main_menu .avia_mega > li > a {

    border: none;

    }

    #top .main_menu .avia_mega a {

    margin: 13px 0;

    height: 21px;

    padding: 0 50px;

    text-align: centre;

    line-height: 21px;

    outline: none;

    float: left;

    }

    #top .main_menu .avia_mega > .current-menu-item > a {

    background: #fff;

    }

    .main_menu .avia_mega > li > a {

    text-transform: uppercase;

    }

    maybe this helps…

    #113561

    Yes, moving the whole menu down at once via the previous css is the best option to keep the whole mega menu continually working. So if that isn’t the look your going for it would probably be best to just leave it as is.

    Regards,

    Devin

Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Front page slider and menu bar’ is closed to new replies.