Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 27, 2020 at 6:38 pm #1178755
    assodefis

    Hello,

    I have Enfold Child with Enfold v4.5.6 on wordpress v5.3.2.
    As found in this forum, I have added to functions.php the following in order to create a widget area in the top right of the header :

    add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
dynamic_sidebar( 'header' );
}

    As found in this forum, I have added to style.css the following in order to create a widget area in the top right of the header :

    #nav_menu-3.widget.clearfix.widget_nav_menu {
	float: right;
	padding: 0 50px 0 0;
	text-transform: uppercase;
}
#nav_menu-3.widget_nav_menu a {
	padding: 0
}

    Then, I have created the widget area header and I have added a menu to this widget area
    In this menu, I have put a single external link.

    The Title of the menu displays at the correct place with uppercase (very nice). However, I can’t click on it. It doesn’t link to anything…
    If I remove the css

    #nav_menu-3.widget_nav_menu a {
	padding: 0
}

    then, I can see that there is a way to click below the title of menu but I don’t want that of course, I want the title of menu to be clickable…

    Also, if you can help me with the following, it would awesome. Whatever menu style I put (default, button bordered or colored), it doesn’t change anything, it stays default.
    I would like this to be like a rounded yellow button with white font.

    January 28, 2020 at 8:38 am #1178902
    Rikard

    Hey Association,

    Please try this CSS as well:

    #nav_menu-3 {
  z-index: 999 !important;
}

    Best regards,
    Rikard

    January 28, 2020 at 10:49 am #1178939
    assodefis

    Thank you Rikard! It works nicely. Thank you also for your fast answer.
    Any idea why the “Button Style (colored)” of the Menu Style is not taken in account by the widget? How can I solve this issue?

    January 29, 2020 at 6:27 am #1179288
    Rikard

    Hi,

    I’m not sure exactly what you have done there so I can’t say for sure, but you are looking to display that link as a button? If so then you might have to add markup manually instead of using a menu:

    <a href="#" class="header-button">My text</a>

    CSS:

    .header-button {
  padding: 10px; 
  background: red; 
  border-radius: 10px;
}

    Best regards,
    Rikard

    January 29, 2020 at 5:07 pm #1179473
    assodefis

    Thank you Rikard for coming back to me,
    I’ve almost reach my needs for this issue.

    I took inspiration from the structure of avia-menu and I added a span.

    <a href="#" class="header-button"><span>My text</span></a>

    I changed all the CSS I wrote for “nav_menu-3” and I wrote instead CSS for “#custom_html-5” and “#custom_html-5 a.header-button” and “#custom_html-5 a.header-button span” taking inspiration from the CSS of “#avia-menu” ..

    #custom_html-5 {
	clear: none;
	position: absolute;
	z-index: 100;
	line-height: 30px;
	height: 100%;
	margin: 0;
	right: 0;
	padding: 0;
}
#custom_html-5 a.header-button {
	line-height: 118px;
	font-size: 15px;
	text-transform: uppercase;
}
#custom_html-5 a.header-button span {
	padding: 10px 20px;
	background: #ff9a07ff; 
	color: #ffffff;
	border-radius: 50px;
}
@media only screen and (max-width:1200px) {
	#custom_html-5 {
	  display: none;
    }
}

    The result is almost there except that the widget doesn’t move up like the menu when the header reduce when we scroll down. How to do that?

    January 30, 2020 at 8:51 am #1179728
    Rikard

    Hi,

    Please try this CSS as well:

    .header-scrolled #custom_html-5 {
    top: -30px;
}

    Best regards,
    Rikard

    February 3, 2020 at 11:36 am #1180838
    assodefis

    Thank you very much!
    It does work as desired now.

    February 3, 2020 at 9:05 pm #1181041
    Victoria

    Hi assodefis,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘widget top right header – no link’ is closed to new replies.