Return to previous page

Header height + top menu on the right - by paulzep

This topic has 33 replies, 3 voices, and was last updated 5 years, 1 months ago ago by Rose Tyler

paulzep

Participant

October 4, 2018 at 20:09

Hi,

I have 2 question about the header:

1/ On desktop, the header with logo and top menu is a bit to height : https://www.bz5-beta.ovh/ compared to https://www.8theme.com/demo/royal/
I did not move anything.

2/ On desktop, the top menu is too much centered. I would like it to be more on the right side (symmetrically to the logo that is on the left side).

If anybody can help me…

Paul

#200526 Copied

32 Answers
Rose Tyler

Support staff

October 5, 2018 at 10:17
Hello,

1. Please add this code in Theme Options > Custom css or in style.css file of your child theme:
```
.page-content {
    margin-top: 0px;
}
.header-wrapper .navbar .tbs {
    padding-top: 0px;
}
```
2.
```
.header-wrapper .navbar-collapse, .fixed-header-area .navbar-collapse{
    float: right;
}
```
Regards
#200562 Copied
paulzep

Participant

October 5, 2018 at 13:35

Thank you. I tried both but neither of them works.

Header weight is okay when I put a margin-top: -25px to the first row of the page. But it’s correct on desktop only. It’s hidden on mobile. So it’s not the solution.

Paul

#200580 Copied

Rose Tyler

Support staff

October 5, 2018 at 13:55

Please provide temporary wp-admin access.

Regards

#200585 Copied

paulzep

Participant

October 5, 2018 at 14:44

Your access in private content.

Header Height and right work now on all the pages, but not on:
https://www.bz5-beta.ovh/
https://www.bz5-beta.ovh/presse/
https://www.bz5-beta.ovh/contact/

By the way, the content portfolio does not display anymore on the pages:
https://www.bz5-beta.ovh/presse/

An other point: mobile menu. I’ve created a specific menu for mobile but it’s not displayed.

Please, contact administrator
for this information.

#200587 Copied
Rose Tyler

Support staff

October 5, 2018 at 15:10
Hello,

1. As I see the custom css code works fine on all pages. If you want to change this height of the header http://prntscr.com/l2kh5j use next custom css also:
```
.header .navbar {
    padding-top: 0px;
    padding-bottom: 0px;
}
```
2. Is the problem solved http://prntscr.com/l2kjga ?
Please read our documentation https://www.8theme.com/demo/docs/royal/#6_portfolio
3. I do not see the problem http://prntscr.com/l2kjyh > http://prntscr.com/l2kk38

Regards
#200590 Copied
paulzep

Participant

October 5, 2018 at 15:31

Thanks a lot!

Point 3: I do not see the same menu :
https://www.cjoint.com/c/HJfoCY3qtnE

Two last question:

on the footer:
do you know how to remove the Newsletter tag?
and how to center the social icon?

Paul

#200593 Copied
Rose Tyler

Support staff

October 5, 2018 at 15:57
3. To disable this http://prntscr.com/l2l74u you can use:
```
.mobile-nav-heading, .mobile-nav .links {
    display:  none;
}
.mobile-nav-heading.close-mobile-nav {
    display: block;
}
```
4. http://prntscr.com/l2l8jk
```
.footer-sidebar-widget .et-follow-buttons {
    text-align: center;
    margin-top: 15px;
}
```
Regards
#200598 Copied
paulzep

Participant

October 8, 2018 at 13:15

Thank you for your answers.

The footer is okay.

For the menu on mobile phone, I’ve put the code you wrote but it does not work: the links to Account and Sign in are still there.

I have 2 more question:

1/ The top menu in the article and Portfolio pages is not height enough.
For example: https://www.bz5-beta.ovh/presse/nantes-policier-tire-sur-un-jeune-place-en-garde-a-vue/
Compared to https://www.bz5-beta.ovh/presse/ (where it is okay).

2/ I would like to translate some text in French:
– https://www.bz5-beta.ovh/presse/maitre-ruben-invite-chroniqueur-dans-c-est-que-de-la-tele/ : ‘Recent Works’, ‘View large’ and ‘More details’ on the images
– https://www.bz5-beta.ovh/2017/10/ : ‘Monthly archives’
– https://www.bz5-beta.ovh/quels-sont-les-recours-lors-du-jugement-rendu-par-defaut/ : ‘Share post’

Paul

#200698 Copied
Rose Tyler

Support staff

October 8, 2018 at 13:43
3. Please check the code one more time http://prntscr.com/l3k88n http://prntscr.com/l3k8hv
1. Please add
```
.page-content {
    margin-top: 0px;
} 
```
in custom css http://prntscr.com/l3k5ac for this page https://www.bz5-beta.ovh/presse/
and edit this code http://prntscr.com/l3k5kk
2. https://xstore.helpscoutdocs.com/article/30-base-theme-translation (this article for xstore theme, but for royal it works in same way)

Regards
#200701 Copied
paulzep

Participant

October 8, 2018 at 14:12

Thank you.

The mobile menu is okay.

For the top header height:
the result I want to get on all the pages is: https://www.bz5-beta.ovh/presse/
I have this result without writing .page-content {margin-top: 0px;}

And on the article/portfolio pages I have :
https://www.bz5-beta.ovh/presse/bavure-de-villemomble-on-se-demande-qui-sont-les-accuses-et-les-victimes/ where the header height is too small. And I want the header to be larger.

Do you kwow why it is different from an page to another?

#200704 Copied
Rose Tyler

Support staff

October 8, 2018 at 14:27
You’re welcome!
Please see screenshots http://prntscr.com/l3kqi2 http://prntscr.com/l3kqpi To make the header on all pages (with breadcrumbs and without it) same, please follow instruction from the previous reply
+ this code:
```
.header .tbs {
    padding-top: 0px;
}
```
Regards
#200705 Copied
paulzep

Participant

October 18, 2018 at 14:57

Hello,

1/ I can not solve this problem:
the header menu is at the right height on most of the pages ( .header .navbar {padding-top: 15px;
padding-bottom: 9px;} ), but not on articles/portfolio dynamic pages, where the menu is not height enough :
Example: https://www.bz5-beta.ovh/presse/nantes-policier-tire-sur-un-jeune-place-en-garde-a-vue/
View: https://www.cjoint.com/c/HJsn1gBYaEE

2/ I would like to change the look of the grid items on the page https://www.bz5-beta.ovh/presse/: text-decoration: none instead of Uppercase, button color #C60800 instead of grey, bg color white instead of grey…
> https://www.cjoint.com/c/HJsnU3Sm0cE

Thank you for answering.

Paul

#201291 Copied
Rose Tyler

Support staff

October 18, 2018 at 16:08
Hello,

1. Please change this custom css code http://prntscr.com/l7l1t1 to
```
.header .navbar {
    padding-top: 15px;
    padding-bottom: 39px;
}
.breadcrumbs-type-9 .page-content {
    margin-top: 0px;
}
```
2. Try to create the desired result using Grid Bilder then select the design in settings of the element http://prntscr.com/l7l4c2
https://wpbakery.com/video-academy/grid-builder/

Regards
#201312 Copied
paulzep

Participant

October 19, 2018 at 15:44

Hello,

Many thanks! Point 1 and 2 are okay.

I have 2 other questions about the header/menu:

1/ I would like to change color of the menu on the active navigation page.

2/ I would like to put bg color: #c60800 on the tab menu Contact, like here: https://www.ruben-associes.com/index.html
I’ve tried: #menu-item-15532 {background-color: #c60800;} but it works only with the text area and not with the tab area.

Can you please help me.

#201364 Copied
Rose Tyler

Support staff

October 22, 2018 at 09:07
Hello,

Sorry for the delay due to the weekends.
1)
```
.header-wrapper .menu .current-menu-item a {
    color: red !important;
}
```
2) Please provide some screenshots for better understanding the desired result.

Regards
#201406 Copied
paulzep

Participant

October 22, 2018 at 09:59

Hello,

Thank you. Point 1 is okay.

2/ I would like to put bg color: #c60800 on the header menu, over the Contact area.
Screenshot: https://www.cjoint.com/doc/18_10/HJwi2tHX6yE_capt-contact-button.jpg

I’ve tried: #menu-item-15532 {background-color: #c60800;} but it works only on the text/link area.

#201416 Copied
Rose Tyler

Support staff

October 22, 2018 at 15:13
Hello,

Please try this code:
```
@media only screen and (min-width: 993px) {
    .tbs {
        padding-top: 0;
    }
    .header .navbar {
        padding: 0;
    }
    .menu > li > a {
        padding-top: 40px;
        padding-bottom: 40px;
        padding: 40px 20px;
    }
    .menu > li:last-child > a {
        background: #b11111;
        color: #fff !important;
    }
    .menu > li.current-menu-item > a:after {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: #b11111;
        content: '';
        left: 0;
        right: 0;
    }

    .menu > li.current-menu-item > a {
        position: relative;
    }

    .menu > li:last-child > a:before {
        content: '\f095';
        font-family: 'fontawesome';
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -150%);
    }
    .fixed-header-area .header-logo {
        padding: 0;
    }
    .fixed-header-area .menu-main-container > ul {
        padding-top: 0;
    }
    .fixed-header-area .collapse br {
        display: none;
    }
    .fixed-header-area .menu-main-container > ul li {
        vertical-align: bottom;
    }
    .fixed-header-area {
        box-shadow: none;
        border: none;
    }
}
```
Regards
#201451 Copied
paulzep

Participant

October 23, 2018 at 15:08

Thank you. It’s great and looks fine!

I have a question about an image on mobile:

I’m using this image on desktop and tablet: https://www.cjoint.com/doc/18_10/HJxofLIyrJE_slide1-home-portrait-3.jpg
I would like to replace with this image on mobile: https://www.cjoint.com/doc/18_10/HJxohelkzEE_equipe-cabinet-ruben-et-associes.jpg

Is it possible?

#201546 Copied
Rose Tyler

Support staff

October 23, 2018 at 15:23
You’re welcome!
You can add a custom class for row and use custom css code for page http://prntscr.com/l9hces
for example http://prntscr.com/l9hdao > http://prntscr.com/l9hdn7
```
.my-custom-class .upb_row_bg {
    background-image: url(https://www.cjoint.com/doc/18_10/HJxohelkzEE_equipe-cabinet-ruben-et-associes.jpg) !important;
}
```
Regards
#201548 Copied
1 2

Viewing 20 results - 1 through 20 (of 33 total)