Tagged: , ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • January 28, 2014 at 7:25 pm #215989
    simonac

    Hello,

    how can i shorten the grey background of the main menu and reduce its opacity. ( with background i mean the grey which goes till the right end of the site.)

    Another small thing is the space after the last menu point ( Feedback) Here is the | to close. How can i give more space there?

    authentic-voice.at/

    Thanks in advance

    January 28, 2014 at 7:31 pm #215998
    Yigit

    Hi simonac!

    Please add following code to Quick CSS in Enfold theme options under Stylling tab

    #top .main_menu .menu>li:last-child>a { padding-right: 15px; }
 .header_color .main_menu ul { background-color: rgba(74,74,74,0.7); }

    0.7 in background color is opacity. You can adjust it between 0-1

    Regards,
    Yigit

    January 28, 2014 at 8:14 pm #216022
    simonac

    That worked out for the opacity and the small space!

    But how about the background which is overlapping to the right? – I want to center the menu and then this is happening.

    .main_menu {
    left: 120px;
    }

    January 28, 2014 at 8:36 pm #216025
    Yigit

    Hi!

    Please try adding following code to Quick CSS

    .main_menu ul:first-child > li { background-color: rgba(74,74,74,0.7); }
 .header_color .main_menu ul { background-color: transparent; }

    If you would like to remove bottom border, please add following code to Quick CSS as well

    #header_main_alternate {
border-bottom-style: none; }

    Cheers!
    Yigit

    January 28, 2014 at 8:38 pm #216026
    Yigit

    Hey!

    Sorry just noticed your “centering” question. Please add following code too and adjust as needed

    .bottom_nav_header.social_header .main_menu, .bottom_nav_header.social_header .main_menu { left: 30%; }

    Regards,
    Yigit

    January 29, 2014 at 11:23 am #216316
    simonac

    Hi Yigit,

    thanks for the answer. But this does not solve the Problem i mentioned.

    Please take a look at the screenshot:

    http://authentic-voice.at/wp-content/uploads/2014/01/123.jpg

    The Menu is still overlapping to the right. How can i get rid of this?

    And i am not able to enlarge the size ofthe menu font.
    I tried these codes:

    .main_menu ul:first-child>li>a {
    font-size: 16px;
    }

    and :

    #top .main_menu .menu li ul a { font-size: 15px; }

    both with different fonts but no change in the size.

    Thanks

    January 29, 2014 at 1:32 pm #216353
    Sergei

    Hi, simonac
    .menu {max-width: 447px;}
    @media only screen and (min-width: 768px) and (max-width: 989px) {.menu {max-width: 408px;}}

    January 29, 2014 at 1:49 pm #216355
    simonac

    Awesome Sergei! Thats it!

    Now i just need to enlarge the font.

    January 29, 2014 at 2:49 pm #216371
    Sergei

    .bottom_nav_header.social_header .main_menu ul:first-child > li a {font-size: 16px;}

    January 29, 2014 at 2:56 pm #216373
    Yigit

    Hi!


    @s_b81     Thanks :)

    Regards,
    Yigit

    January 29, 2014 at 3:23 pm #216387
    simonac

    Awesome Dudes! Thumbs up!

    Is it possible to make a blank space between the Menu and the content?

    Regards

    Simon

    January 29, 2014 at 3:56 pm #216405
    Yigit

    Hey!

    Please add following code to Quick CSS as well and adjust as needed

    .html_boxed #main { padding-top: 100px; }

    Regards,
    Yigit

    January 29, 2014 at 4:16 pm #216427
    simonac

    Great!

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘How to shorten the background of the main menu and reduce its opacity’ is closed to new replies.