HomePage Forums TheBox Excess width on visual composer rows

This topic contains 17 replies, has 2 voices, and was last updated by  Bryan 11 months ago.

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #5872

    Hi,

    1 – I have attached 3 screen grabs showing some excess width on two Visual Composer rows.

    Both of these rows have some basic HTML code that displays text and small icons (font awesome), when I add a coloured background the row then becomes wider than the rest of the page.

    How can I make the two rows not so wide?

    2 – Can you tell me what ‘class’ or ‘id’ I need to change to make the main menu display on the right hand side and not on the left hand side? (see attached screen grab)

    3 – How can I change the colour of the high lighted page within the main menu at the moment it is ‘black with white text’ I would like red with white text. If you can tell me where in the CSS it is and I will have a look.

    Let me know if you need account access.

    Many thanks in advance

    Attachments:
    You must be logged in to view attached files.
    #5978

    Hello

    Please provide an admin account so i can help you config visual row setting to make it display like your want.

    Thanks

    #5980
    This reply has been marked as private.
    #5981
    This reply has been marked as private.
    #6299

    Hello

    I changed the extra width for you.

    Please check again.

    Thanks

    #6343

    Hi Bryan,

    Thank you, can you tell me what the issue was?

    Also, can you answer the other two questions that I asked, they are listed again below.

    2 – Can you tell me what ‘class’ or ‘id’ I need to change to make the main menu display on the right hand side and not on the left hand side? (see attached screen grab)

    3 – How can I change the colour of the high lighted page within the main menu at the moment it is ‘black with white text’ I would like red with white text. If you can tell me where in the CSS it is and I will have a look.

    Many thanks

    #6430

    Hello

    That is just visual row/column settings.

    2. You menu have some items in white color.

    You can try this css code to change the color:

    .navbar-main .navbar-nav > li > a {
        color: #000 !important;
    }

    and make it to the right:

    .navbar-main .navbar-nav,.navbar-main .navbar-nav > li {
        float: right;
    }
    .navbar-inverse .navbar-collapse {
        margin-right: -30px !important;
    }

    3. This css code will help you change the background color of current menu item:

    .navbar-main .navbar-nav > li.current-menu-item > a {
    color: #fff !important;
    background-color: #cc3434;}

    Thanks

    #7093

    Hi,

    Thank you for the code, the menu float right code also changes the order of the menu items, even when I re order the menu item w
    Within WordPress they end up the wrong way, how can I change this? The menu is on the right (correct) but the menu itms go right to left (not correct).

    Also, how can I get the background colour of the current page on the drop down menu items as well?

    Thanks

    #7094

    Hello

    You can change a bit in the code to this:

    Remove this code:

    .navbar-main .navbar-nav,.navbar-main .navbar-nav > li {
        float: right;
    }

    and edit this code

    .navbar-inverse .navbar-collapse {
        margin-right: -30px !important;
    }

    To this:

    .navbar-inverse .navbar-collapse {
        margin-right: -30px !important;
        margin-left: 58%;
    }

    Also this is css code for background color of current dropdown menu item:

    ul.navbar-nav ul.dropdown-menu > li > a:active {
        background-color: #ce0000 !important;
    }

    Thanks

    #8522

    Hi,

    Thank you for the above, the menu now sits correctly on the right.

    I am still having issues with the menu sub item text not matching the main menu item colours, red, can you please have a look and let me know how i change the sub item menu text colour?

    Also, the active menu item is still just white, how do i change this?

    Thanks

    #8567

    Hello

    You can use this css code to change the sub menu item activated color:

     ul.navbar-nav ul.dropdown-menu > li > a:focus {
        color: #ce0000 !important;
    }

    Thanks

    #9328

    Hi Bryan

    The code you gave me to change the color for the drop down menus does not work, can you have a look?

    I need the drop down menu items to be the same color as the top menu item (currently in red)

    Also, the code you gave me for the active menu is still white, how do I change this?

    Please answer both questions, really want this sorting as it has taken ages now.
    Many thanks

    #9399

    Hello

    I just changed the color for the menu as your description by this code:

    ul.navbar-nav ul.dropdown-menu > li > a:hover { color: #D82827 !important; }
    .dropdown-menu > .active > a { color: #D82827 !important; }
    .navbar-main .navbar-nav > li:hover >a { color: #D82827 !important; }

    Please check again.

    Thanks

    #11051

    Hi Bryan,

    Thank you for the last reply, all looking good now.

    Another issue I’m having, can you show me where I can set a smaller height for a row?

    I have attached a screen grab showing you my issue, I want less height on the top black bar, marked with red.

    If I move the nav bar plus rest of the home page up using the -margin within the row setting I lose the hyperlink functions on the social icons within the black bar.

    Can you help?

    Many thanks

    Attachments:
    You must be logged in to view attached files.
    #11055

    Hi Again,

    I have recreated the 3 sections within the black top bar as RAW HTML blocks and have managed to reduce the size, the hyperlinks however still do not work.

    Any suggestions?

    Many thanks

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.